A Practical Introduction to Scroll-Driven Animations with CSS scroll() and view()
If you were going to read one article to get you going with Scroll-Driven Animations from scratch, I think Adam Argyle has the one so far.
Tag Archive for
Scroll-Driven Animations
A Scroll-Driven Animation… with a Duration
Ryan Mulligan digs into a Jhey Tompkins Pen and discovers a neat little trick involving two @keyframe animations. The first is a “trigger” animation that triggers when a certain element comes into view, and flips a –trigger custom property. Via a Style Query, that triggers the actual animation. Why bother? Scroll-driven animation durations are, well… […]
Highlight Text When a User Scrolls Down to That Piece of Text
I was reading a great post on Lene Saile’s blog and noticed a cool little design feature on her site that highlights a line of text once you scroll to it. Here’s a video so you can see what I mean: The highlighted line is done with a <mark> element in HTML, which feels right. […]
Background Size Zooming with Scroll Driven Animations
I’ve seen all the excitement about scroll-driven animations. I’m excited too. Animations that use scroll position as a timeline rather than a time-based duration is just a clever idea. It’s something that websites have been using probably-too-much JavaScript for for a long time and it’s nice to see that kind of thing move to CSS […]