DEV Community

Cover image for animation-timeline: WIN!
Ben Evans
Ben Evans

Posted on β€’ Edited on

3 1 1 1

animation-timeline: WIN!

Scroll Buckets

Third persona style!

Ivorjetski (aka Ben Evans) was becoming increasingly aware that a lot of new CSS capabilities we being released and he had mainly been ignoring them 😬

He'd seen a lot of cool new demos using the new scroll features and thought it was about bloody time he tried something himself.

Talking of cool new CSS scroll demos, you can't much better than this one, by Adam Kuhn 😍

Anyway... Ben ain't go no time for doing something quite that amazing! He was far too busy procrastinating over how to put off making a game of Snake with CSS.
So instead, he came up with the idea of seeing if he could retro-fit a scroll based animation into an older CSS art piece: Pure CSS Playing Card - King of Hearts - This used to animate on hover, but he was never happy with it, it was a bit jittery. So Ben thought he could fix it with a bit scroll based magic! Hogwarts style!πŸ“œπŸ§™β€β™‚οΈ

And... Oh my god! Animation-timeline is so simple and so powerful!! It was an absolute breeze! Actually a little disappointing, in a way... How can Ben have fun trying to create impossible things with CSS, if CSS is now this powerful and easy! This should be banned from Hogwarts! Banned and thrown straight into the scroll bucket! πŸ—‘οΈ

All the animations were already in place. Ben simply needed to remove the trigger by hover and replace the trigger with: animation-timeline: scroll(); And that was pretty much that! - Apart from giving the page a bit of extra height and fixing the card in place, so it didn't move on scroll. Ben thought: "Where is the fun in that!" But he has to admit, it is quite fun and it works so well. He thinks he will be using this feature a lot more in future... Perhaps to make a PlayDate style game, but using scroll, instead of the fun little crank.

Oh and by-the-way, everything is CSS, including the card face, there is a video of Ben creating it:

There was also a little writeup on how it was made in frontend.horse

Would be cool to know what you think?

See ya x

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (1)

Collapse
 
warkentien2 profile image
Philip Warkentien II β€’

I'm still stuck on how you animated 3D lighting with CSS! Did you use any tool to prep this up, base it off of an animation, or do you simply have a 3D lighting engine in your head?

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay