flackr / scroll-timeline

A polyfill of ScrollTimeline.
Apache License 2.0
947 stars 91 forks source link

Polyfill doesn't define `ScrollTimeline` at all. #160

Open MrFoxPro opened 1 year ago

MrFoxPro commented 1 year ago

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: image

MrFoxPro commented 1 year ago

At the same time, https://argyleink.github.io/scroll-timeline/dist/scroll-timeline.js works, but it doesn't follow specs.

bramus commented 8 months ago

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:

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.

steve-tranont commented 7 months ago

I have the same problem in Chrome.

bramus commented 7 months ago

I have the same problem in Chrome.

Which version are you using? Scroll-Driven Animations shipped in Chrome 115.