I thought so, but when I came back to the tab later it was working, and was able to go through all examples. Unlike Chrome who crashed halfway through the page.
I was going to rant something about open standards and how they did not care to test this toy on Firefox (but they did it test it on safari), but I grew tired.
According to MDN, the feature can be enabled in Firefox by enabling layout.css.scroll-driven-animations.enabled in Firefox (though the demos don't work, looks like there are still some implementation bugs).
I don't really mind proof of concept demos like these only working in some browsers. The feature is still useless on real websites, but who cares about a silly cat GIF made up of CSS boxes not working.
I tested this on safari and chrome + mobile but not the fox as I rarely use it. I know that ff is more common in the dev world so on the next toy I will be sure to give things a whirl there too.
For ref, I didn't test this on windows, linux, or android nor the browser combos within.
Animating timeline via css variable causes restyle cascade for all descendant elements. Maybe it is fine for shallow structure but generally it’s much more performant to change transformation directly. Of course that makes it less convenient as computation would have to be duplicated in js
Impressive!
Uploaded a 32mb video, played a few frames and immediately crashed my tab, honestly, that's also impressive, chrome rarely crash like this :D
NB: using scroll to play video frame by frame is nice but on macos you can hide the scrollbar which makes it not very obvious that you can do that
