Scrollnapping animations

We set the scrolling element, in this case our HTML element to forcibly snap to the Y axis by using scroll-snap-type: y mandatory.

And then we set section as the snapping elements by using scroll-snap-align: start.

We set the scrolling element, in this case our section elements, to track their view() position inside the browser using view-timeline: --section;. We had previous set the timeline-scope: --section up in our HTML element, so we can access it from anywhere in the document.

We animate the .content children using animation-timeline: --section;. The .content element will now animate based on its parent section's position. This is important due to how we're handling the layout in the next section.

We set the .content elements to position: fixed, so they're removed from the normal document flow and stack on top of each other. We give them a solid background, so we can see only one at a time.

Their parent sections are positioned as normal in the layer below, taking up space, scroll-snapping, and powering the animation-timeline.

By setting the .content elements to position: fixed, we can now transition between them without a visible scrolling movement.

We create a normal @keyframe animation to our liking to transition between them. Check the navigation menu to see different effects.

• Scrolling animations are not currently available in Firefox. This demo is using a polyfill.
• This layout is fragile due to the use of position: fixed. You need to carefully manage stacking contexts.
• Snapping points have their own caveats, such as content taller than the viewport becoming inaccessible, along with the general annoyance of scrolljacking.
• The blink effect uses the contrast() filter, which modifies the colors of the entire section. Thus, the background is set to black (or white), ensuring that it appears unchanged during transitions due to already being at maximum contrast.