Scroll into View not working with CSS Scroll Snap

Hi there

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

Hi Mapleshilc

I am not really sure where the problem is? Everything seems to work for me :blush: 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.

Hi David

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:

ezgif-6-333018b6520d

Hi Mapleshilc,

I just came into the exact same issue. Any luck since your last reply?
Many thanks.

hey guys… any solution here? Same need here

Same here been looking for a solution for days!

Hey Adam,

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 :smiley:

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:

  1. While page is scrolling → Logo (Lottie) 0% to 100%
  2. Scroll in View targeting the section 2 → change .NavLink Text Color from White to Black

Project Link

Does somebody have a solution for me?

1 Like

Hitting this issue too.

Any answers here??? Still no solution?