I am making a website with scroll snap functions, I have recently just got CSS Scroll Snap to work, but I have run into some major problems with interactions
I have divided my website currently into 3 1VH sections, each scroll will snap into the next or previous section. So I would like to have animations happening when you snap into that section, but “scroll into view” doesn’t work, I have to scroll again for the interaction to trigger, and I am already on the next section.
The scroll snap does not work in preview, so the domain is published
Here is the published domain for scroll snap testing with the interactions:
And for the preview version here
(in the preview version the css scroll snap doesnt work, since its in the head part of the code):
Here is my public share link: LINK
I am not really sure where the problem is? Everything seems to work for me What browser are you using to test?
Also, if you want to preview the functionality – then place the code you have in the head tag into a HTML embed instead.
Thank you for the quick reply
I will address the latter question first, I tried using HTML embed, but it completely breaks the CSS Scroll Snap. I think it is because it is using the “Body” and “HTML” tags rather than just class tags, I am modifying the scroll-snap-type on body, and overflow on HTML to get the css scroll snap to work.
I am using the newest version of Chrome and Edge.
the problem is, when I scroll one click, it goes from the yellow section to the red section. And nothing happens, but the headings are suppose to already animated in. when I scroll again, one click, the headings animate in, but I am already in the blue section. and when I am in the blue section, I have to scroll down again, for the animation to start.
here is a GIF I recorded from my screen:
I just came into the exact same issue. Any luck since your last reply?
hey guys… any solution here? Same need here
Same here been looking for a solution for days!
Try putting your 100vh sections inside a wrapper with
overflow: auto and
height: 100vh. If you are targeting the sections with your interactions, you should add offsets to both scroll in view and scroll out view.
You can copy and see it in action here: LINK
Let me know if it works or you have any questions
Hi webflow community.
I have been looking for a solution for days as well…
Scroll into View and While page is scrolling doesn’t work with CSS Scroll Snap.
@Davidlin_ch12 I tried your suggestion and it doesn’t seem to work for me.
Two Interactions types:
- While page is scrolling → Logo (Lottie) 0% to 100%
- Scroll in View targeting the section 2 → change .NavLink Text Color from White to Black
Does somebody have a solution for me?
Any answers here??? Still no solution?
Hey David, works well on desktop but on iPad and iPhone I am running into some trouble. The interactions don’t work like on desktop. Any ideas? I’m thinking of just disabling them but I’d rather not.