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
Top comments (1)
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?