Scroll-Driven Animations

6 months ago by codeinabox to c/css

The new Animation Timeline API allows us to create dynamic scroll animations without any JavaScript! It’s honestly a very lovely API, and in this blog post, we’ll explore some of the super cool things we can do with it.

Lumidaub 4 points 6 months ago

Exploring the majestic new animation-timeline API

wat

One of the best ways to add a bit of personality to our websites is to animate things on scroll.

No. I can't remember this sort of thing ever adding anything to my experience on a website. It's usually annoying and distracts from the actual content.

save

path: 0 23464952, hotness: undefined, score: 4, children: 8

Dirk 4 points 6 months ago

Absolutely. Scrolljacking is annoying as hell!

save

path: 0 23464952 23468086, hotness: undefined, score: 4, children: 1

codeinabox 1 point 6 months ago

I am against scrolljacking too. Though having read through the article, and seen the animation in action at https://whimsy.joshwcomeau.com/, this is not scrolljacking, it's just something that animates as you scroll. It's so unobtrusive that I didn't notice it the first time.

save

path: 0 23464952 23468086 23493468, hotness: undefined, score: 1, children: 0

codeinabox 1 point 6 months ago

Given this is achieved with CSS, there is no reason that users can't disable animations with a user style sheet. In fact this is what some users do, according to a CSS Working Group discussion about disabling view transitions.

Some users do set transition-duration: 0 !important in user style sheets in order to prevent transitions, same with animation: none !important or so.

save

path: 0 23464952 23472385, hotness: undefined, score: 1, children: 5

Lumidaub 2 points 6 months ago

And that is something the average user does instead of just hitting the back button?

save

path: 0 23464952 23472385 23472776, hotness: undefined, score: 2, children: 4

codeinabox 2 points 6 months ago

Do we know the average user hits the back button when they encounter CSS animations? I was just a conference, and people were talking about browsing the web in reader mode, which I'd argue is more likely.

save

path: 0 23464952 23472385 23472776 23482370, hotness: undefined, score: 2, children: 3

Lumidaub 2 points 6 months ago

So why do animations and pretty design at all?

save

path: 0 23464952 23472385 23472776 23482370 23482936, hotness: undefined, score: 2, children: 2

TheV2 2 points 6 months ago

Websites that let me scroll down and up without any annoying animated hindrance have my thanks.

save

path: 0 23468073, hotness: undefined, score: 2, children: 0