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:
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.
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.
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
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 .element.is-active 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!
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:
<style>
html {
scroll-snap-type: y mandatory;
}
</style>
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;}";
document.getElementById(id).scrollIntoView({
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.
What browser are you using to test?
