Feature detecting Scroll-Driven Animations with @supports: you want to check for animation-range too

~

Scroll-Driven Animations versus Firefox

Ahmad recently launched a redesign of his website. On it he features some nice Scroll-Driven Animations to enhance the experience. As one should do, the CSS for it is gated behind an @supports result which feature detects availability for Scroll-Driven Animations.

@supports (animation-timeline: scroll()) {
  /* Scroll-Driven Animations related styles go here */
}

However, even though he gated the functionality behind a feature check, he got some reports from users that it wasn’t working as expected in Firefox: the animations would run on scroll but the timing would be waaaayy off. So he reached out to me, asking what gives.

The problem is that, at the time of writing, Firefox Nightly – which has Scroll-Driven Animations enabled – only has a partial implementation of it. They support a bit of it, but not everything. One of the things they do support is animation-timeline: scroll(), making Firefox Nightly pass the feature detection snippet from above.

~

Filtering out Firefox’s partial implementation

To filter out Firefox Nightly, you need to extend the feature detection for Scroll-Driven Animations to include a check for something they don’t support yet. For this, you can check for animation-range support, as that’s a property that is not part of their partial implementation.

Like so:

@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
  /* Scroll-Driven Animations related styles go here */
  /* This check excludes Firefox Nightly which only has a partial implementation at the moment of posting (mid-September 2024). */
}

Here’s a live demo:

See the Pen
Feature detect scroll-driven animations support but exclude Firefox’s partial implementation
by Bramus (@bramus)
on CodePen.

That’s it 🙂

~

Spread the word

Feel free to repost one of the posts from social media to give them more reach, or link to this post from your own blog.

~

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.