flackr
Polyfill doesn't define `ScrollTimeline` at all.
Trying to use
import 'https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js';
Results in no ScrollTimeline defined.
This is also a case on demo site:
At the same time, https://argyleink.github.io/scroll-timeline/dist/scroll-timeline.js works, but it doesn't follow specs.
I see that you are using Firefox Nightly, which is the culprit here.
Firefox has a partial implementation of Scroll-Driven Animations, which is enabled in Nightly. Because Nightly claims support for SDA – even though it’s not entirely implemented – the polyfill bails out.
Looking at what Firefox Nightly does and the polyfill:
- Firefox has (partial) CSS Support
- Firefox has no JS Support (
ViewTimelineandScrollTimelineare undefined) - The polyfill doesn’t load when it detects CSS Support.
The polyfill’s feature detection needs to be adjusted so that it can plug the JS and CSS functionality individually.
To be transparent though: I don’t think a vendor would ship either only the CSS or only the JS approach. If this change turns out to be Very Complicated™, then I don’t think it’s worth pursuing this adjustment because it doesn’t affect Firefox Stable users.
In Firefox Stable the partial implementation isn’t active, so users don’t run into this weird situation. If you use Nightly on a daily basis you can set layout.css.scroll-driven-animations.enabled to false via about:config so that the polyfill loads as it normally does.
I have the same problem in Chrome.
Which version are you using? Scroll-Driven Animations shipped in Chrome 115.