SoatDev IT Consulting
SoatDev IT Consulting
  • About us
  • Expertise
  • Services
  • How it works
  • Contact Us
  • News
  • August 4, 2025
  • Rss Fetcher

Scroll-Driven Animations are a bit closer to usable now that Safari has them in Technical Preview and Firefox has them behind a flag. Chrome has released them.

Saron Yitbarek has been blogging about it for Apple, and it’s nice to see. Apple hasn’t ever been super big in the “we make educational content for web development in general” department but maybe that’s changing. I like how Saron lays scroll-driven animations out:

What I like about this framing is that it underscores that the target and the timeline can be totally different elements. They also have no particular requirements for where they live in the DOM. A rando <div> that scrolls can be assigned a custom timeline name that some other totally rando <section> elsewhere animates to. It’s just a freeing thought.

There is also this important thing to know about scroll-driven animations: there are two kinds. One of them is animation-timeline: scroll(); where the timeline is simply how far the element has scrolled and the other is animation-timeline: view(); where the timeline is all about the visibility of the element in the viewport (browser window). The later is maybe a little more fun and interesting in general, for fancy designs. And it’s got a bit more you need to learn about, like animation-range. Again Saron Yitbarek has a new article out about it: A cheatsheet of animation-ranges for your next scroll-driven animation. There are a bunch of keywords for it, thankfully, and Saron explains how they work.


Me, I finally got a chance to look at Bramus’ If View Transitions and Scroll-Driven Animations had a baby, which is a bit of a mind blowing concept to me. They feel like very different ideas, but, then again, a View Transition is essentially a way to define and animation you want to happen, and scroll-driven animations could be the way the view transition progresses. It’s still weird: like how could a scroll position affect the state of the DOM?? You should probably watch Bramus explain in the video/slides linked above, but I couldn’t resist poking at it myself on a recent stream.


Are you a little leary of using scroll-driven animations because of the browser support? Well Cyd Stumpel has some things to say about that in Two approaches to fallback CSS scroll driven animations.

Scroll-driven animations are set to land in all major browsers by the end of the year, but I haven’t seen many people using them in production yet.

They aren’t in Interop 2025 or anything, but with all three major engines having at least flagged implementations, it shouldn’t be too long. But there will always be a long tail of people on browsers that don’t support them, so what then? Cyd nicely explains two approaches: progressive enhancement and graceful degradation. These concepts are often hard to explain the difference between, so this is a great example. Those two links just now? Pens that show off the concepts perfectly.


I’ll leave you with Amit Sheen going buck wild on sticky headers that do fun things with scroll-driven animations, like the text in the header typing itself out (and then back).

Previous Post
Next Post

Recent Posts

  • Time to factor big integers Python and Mathematica
  • Foxconn sells former GM factory to mystery buyer after failing to make EVs
  • How a recent grad bridges the gap from school to career with CodeSignal Learn
  • Rivian sues to sell its EVs directly in Ohio
  • Amazon denies report it’s shutting down Wondery podcast studio

Categories

  • Industry News
  • Programming
  • RSS Fetched Articles
  • Uncategorized

Archives

  • August 2025
  • July 2025
  • June 2025
  • May 2025
  • April 2025
  • February 2025
  • January 2025
  • December 2024
  • November 2024
  • October 2024
  • September 2024
  • August 2024
  • July 2024
  • June 2024
  • May 2024
  • April 2024
  • March 2024
  • February 2024
  • January 2024
  • December 2023
  • November 2023
  • October 2023
  • September 2023
  • August 2023
  • July 2023
  • June 2023
  • May 2023
  • April 2023

Tap into the power of Microservices, MVC Architecture, Cloud, Containers, UML, and Scrum methodologies to bolster your project planning, execution, and application development processes.

Solutions

  • IT Consultation
  • Agile Transformation
  • Software Development
  • DevOps & CI/CD

Regions Covered

  • Montreal
  • New York
  • Paris
  • Mauritius
  • Abidjan
  • Dakar

Subscribe to Newsletter

Join our monthly newsletter subscribers to get the latest news and insights.

© Copyright 2023. All Rights Reserved by Soatdev IT Consulting Inc.