Scroll-Driven Animations
14 points by eaj
14 points by eaj
I really want to use this to replace the last piece of JavaScript on my blog that animates the spinning gear on scroll. I tested it and it looks great on chrome, even smoother than the JS event driven version. Alas, without Firefox support it’s a no-go. Hopefully Mozilla will stabilize it soon.
It’s an interesting concept but just fyi the spinning gear doesn't look as good on mobile, because the scroll speed after a flick decreases over time but the gear speed is constant. I expect that scroll driven css animations would fix this for free. You could selectively serve a JavaScript polyfill if the UA is Firefox
I generally loathe scroll-driven animations¹, because they're usually very choppy and make scrolling very unnatural / unintuitive. The few I've seen that rely on animation-timeline are butter smooth though, to the point that I got convinced to use one myself for the landing page of a project I'm working on².
As a developer, it was fun to implement, and now I feel biased to keep it. But I'm not sure it's actually any good for the user. Or rather, as a user, if I had to choose, I'd most likely prefer no animation at all. But well, sometimes one does things for fun.
¹ I find the ones on apple.com particularly offensive, like the one "opening and turning" the laptop here https://www.apple.com/macbook-neo/.
² https://superego.dev/, if you're curious to see it in action.