Future CSS Tip! 🔮 You can power list animations like you would using IntersectionObserver with CSS scroll-driven animations and zero JS 🤯 el { animation: show; animation-timeline: view(); animation-range: entry; } keyframes show {0%{translate:0 50%;}} CodePen.IO link below! 👇

Here's that @CodePen link! 🚀 Remember, need to be in Chrome 115+ to see this in action and for the View Transitions to fire 👀 Love trying to combine these new APIs ✨

@CodePen This is pretty cool. Some strange loading when you click the guitar that you'd need to consider. I guess it's because the elements below haven't loaded because there are out of view...

@CodePen Yeah, there's an interesting thing happening here to do with how it works when clicking something that hasn't fully animated into view yet 🤔 Also it depends on where the browser decides it can push the element to when shuffling the grid. Definitely a fun experiment though! 😁

@CodePen Any good resources to learn more about animations that you would recommend? Havent used them much in my career unfortunately

@CodePen can't wait for these features to become the norm

@CodePen What is this new ? is this vanilla css ?

@CodePen It will be soon 🤏 It's only supported in Chrome currently 🥲

@CodePen Does this play nicely with lazy loaded images?

@CodePen Awesome, I like this. It would be nice to use this feature right away.

@CodePen Too right Jin 💯 Will be sweet when it has good support across the board 🤞