Scroll-Driven Animations
22 points by eaj
22 points by eaj
Scroll driven animations make sense in an extremely narrow set of circumstances, but in most circumstances they are awful. I think the only time they really make sense is on a "timeline-like" post, where you are replacing "next" and "previous" buttons with a fancy animation. If it doesn't make sense to use next and previous buttons on your content, you also shouldn't use scroll-based animations.
As a really nice fallback that i don't think I've seen anywhere, it would be great if your fancy animation had a toggle to turn it off and replace it with "next" and "previous" buttons.
In my private project I'm working on I have a map and details pane for selected features. The details pan uses scroll snap. I was thinking about using a scroll-based animation based on details pan scroll to fade in and out a pin on the map showing the current feature.
So yes, basically next/previous situation.
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.
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