I'd like to know why this works

[artinruins]

I’ve been coding with CSS for about 15 years and like to think that I am keeping pace with the new ways of accomplishing what used to be heavy javascript effects. This Pen from Scott Kellum blows my mind, though: https://codepen.io/scottkellum/pen/WWeXab

I get that he is putting some scroll position values (via JS) into a CSS Custom property and then using a calc() function to change the animation-delay on a paused keyframe animation. I understand what is happening and I have even used it myself. What I don’t understand is why it works.

Why does changing the animation-delay value effectively play the animation like you are using the scroll position as a “video scrubber”? How does that work? What is in the spec that allows this to happen?

[Shikkediel]

I think the trick is in the negative value, it will make the animation start (and pause) at the same percentage point compared to the total amount of scrollable area. Defintely clever.

[Author]

Posts