Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS I'd like to know why this works

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #287061
    artinruins
    Participant

    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?

    #287079
    Shikkediel
    Participant

    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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.