Future CSS Tip! 🔮 Get creative with scroll-driven animations whilst reusing your keyframes 🤙 li:nth-of-type(odd) { --tr: -1; } img { transform-origin: calc(300% * var(--tr)) 50%; } keyframes rot { from { rotate: -30deg;} to { rotate: 30deg;} } CodePen.IO link below 👇

Here's that @CodePen link! 🚀 Although you'll need to be in Chrome Canary to see it in action ⚠️ That said, this tip applies to CSS animation in general. Try and reuse your keyframes if you can. Use scoped custom properties in them if needs be, etc.

Saw this great bit of inspo on the @awwwards site and had to see how to create it with CSS scroll driven animations 🤓

@CodePen I feel like this could be an AirBnB page that says 'feeling lucky?', so you scroll though different locations until you find one you like. Nice demo!

@CodePen That would be neat. I could even see it as a nice portfolio site where each drop is a link to a different page or content, then finish on your contact details and social icons at the end 🤔

@CodePen I realized you've just invented horizontal (almost) infinity scroll 👀

@CodePen Isn't having all that motion considered not great for accessibility? For people with motion sickness and certain other disabilities?

cool!

@CodePen @notout82

@CodePen Very inspiring 👍

@CodePen bonito

@CodePen 🤩

@CodePen Really nice!