the little details™ Use trigonometric functions in CSS to create a smooth staggered transition delay 🎬 .character { transition-delay: calc(sin((var(--index) / 12) * 45deg) * 0.475s); }

Here's the @CodePen link if you want to check it out! 🤙 Thrown together in some React for convenience 🤓 Should extract into a <CodeReveal/> component 💯🧱

I'm going to just secretly put this into the app I'm working on and see if they notice 😄

Put it in the footer, no one looks there 👀😅

Yeah, how do you get the —index variable? Thats the true magic here i cannot fanthom… cuz normally that would all be part of a javascript loop

Style it inline on the HTML <span class="digit" style="--index: 0;">1</span> <span class="digit" style="--index: 1;">9</span>

Show us the code

Amazing stuff!

Those animations are so cool! At some point, it almost felt like the eye blinked. 😊 I might add this animation to the app that I am working on. It's the next level for CSS!

Very smooth! I wrote something similar in Sass as a function that lets you call a bunch of different CSS custom timing-functions from different keywords, Penner equations and Trig stuff. This makes me want to modify or write a separate function that returns calc equations instead

goated animations