The last chapter introduced the idea of tying an animation to a scroll. We used JS to do this, but let’s spend a bit of time getting familiar with a pure-CSS way to do this that is more performant (ie. it is both fast and efficient) and easier to understand (for us 🧠).

animation-timeline

Here’s a conceptual shift: animation-timeline doesn’t need to be a temporal (time-based) duration… it can be a distance.

We defined a timeline like this:

<aside> <img src="/icons/light-bulb_blue.svg" alt="/icons/light-bulb_blue.svg" width="40px" />

A timeline-based animation is one that runs along an explicit timeline defined by percentages in an @keyframes block (kind of like a video timeline) where you can specify what happens at each point in time. Percentages are used to make the animation time-independent: the duration of the animation might change, but percentages represent the same series of events occurring at different stages throughout the animation.

</aside>

Instead of a time-based duration, A timeline

scroll()

view()

Let’s look at each of these in turn.

scroll()

https://codepen.io/alexmesker/pen/azpKBNb

TODO: add useless scroll-position animation.

view()