You could create those Apple-style dynamic CTA reveals with container style queries and scroll-driven animations with zero JavaScript ๐ (Sticking to the #AppleEvent theme)
1. Use a scroll-driven animation scoped to each section for each CTA to change a custom property value (--activate) between 1 and 0. 2. Use a container style query to dictate the transition sequence for each moving part making use of transition-delay. 3. Make use of linear() easing to get the right effect โก๏ธ
It's wild to put all these APIs together and see what's possible. There are likely some spots to tidy this up ๐ฏ These are powerful combinations for sure though! ๐ช
@CodePen link below! ๐
Here's that @CodePen link! ๐
You'll need to be in Chrome 115+ to see everything working as it should ๐ค
Arguably one of the coolest parts about this sprite animation is using a CSS filter to change the color ๐
This is how the animation looks from the demo and we combine scale and filter to change the color and bump the icon size without editing the SVG itself ๐ค
It's this. Grab the pointer position, and work out the ratio that the cursor position is in relation to the card size. It's gonna be between 0 and 1 ๐ค
The performance of CSS :has() is pretty incredible. There's another demo I'll share where it does some pretty "extra" stuff and it handles it like a champ ๐ช
The amazing thing about building things like this is that it challenges the way we think about using certain tools. This is one of the points I made in my talk today at @webdevconf ๐