Streaming live at 10am (PST)

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: