Scrollnapping Animations - CSS Scroll-Driven Demo

\n

First, we set up the snapping points

\n\n

\n $\"\"$ \n

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.

\n\n

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

\n

Next, we set up the scrolling animation

\n\n

\n $\"\"$ \n

We track the view() position of the section elements using the named timeline view-timeline: --section;. We had previously set the timeline-scope: --section up in our HTML element, so we can access it from anywhere in the document.

\n\n

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.

\n

Then, we position a fixed layout

\n\n

\n $\"\"$ \n

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

\n\n

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

\n

Finally, we create the transition effects

\n\n

\n $\"\"$ \n

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

\n\n

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

\n

Caveats

\n\n

\n $\"\"$ \n

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.

\n