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.

Feature detecting Scroll-Driven Animations with @​ supports in CSS: you want to check for `animation-range` too, in order to exclude Firefox Nightly, which only has a partial SDA implementation.

Details: https://t.co/K0OMGj5olj pic.twitter.com/HIcRBV5yzM

— Bram.us (by @bramus) (@bramusblog) September 24, 2024

~