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:


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?

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.

Half a year later and I found myself with the same problem again. I had tried to solve it before by using fullpage js, however this breaks other parts of my website (especially in Safari).

So went back to scroll snapping, but then again this broke the Webflow interactions.

Solved it this way, it be helpful to someone :slight_smile:
By using javascript, add a combo class to the element I wanted to animate, each time it would be visible in the viewport. Simply asked chatGPT to write me some javascript that adds a combo class of .is-active to the element with class .element when it would be in the viewport.
Then I made .element 0% opacity, and 100% opacity. Then set a css transition of opacity to .element. Now my element has a opacity animation when scrolling into view, as well as the desired effect of scroll snapping!

Well, I kind of solved it. Worked around, really.

The first thing I did was to separate my style tag in the header in two, for we will need to rewrite it later.

the first was like this:

    html {
      scroll-snap-type: y mandatory;

and the second had all the usual styles.

Now, when I need to do scroll into view, my function does the following:

function scrollToID ( id ) {
    document.getElementsByTagName('style')[0].innerHTML="html {scroll-snap-type: initial;}";
      behavior: "smooth",
    var protoresnap = setTimeout(resnap,500)

and of course I also have the resnap function:

function resnap () {
    document.getElementsByTagName('style')[0].innerHTML="html {scroll-snap-type: y mandatory;}";

It sucks; but it’s the only way I found to do the workaround. The problem seems to be that the snap position is saved in the system. When you remove the “scroll-snap-type”, wait 500ms and then restore it, it seems to be enough to clear it. 100ms was not being time enough, that’s why 500ms.