Scrollnapping Animations

\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","deleted","label",[98],"permalink","https://www.val.town/x/dcm31/scrollnappingAnimations/code/main.tsx","extension","actionData","errors"]