CSS blurred text reveal on scroll 📜 .character { animation: drop; animation-timeline: --section; animation-range: var(--start) var(--end); } @​keyframes drop { 0% { filter: blur(10px); translate: 0 -75%; } } Inspo: daylight

CSS scroll to unblur text ✨ .word { --start: calc(var(--i) * var(--pxPerWord)); --end: calc((var(--i) + 1) * var(--pxPerWord)); animation: fx; animation-timeline: --section; animation-range: var(--start) var(--end); } @​keyframes fx { 0% { filter: blur(20px); opacity: 0; }}

do kids even still have house parties when their parents are away? huge teen events

Linux user starter pack

If we go ahead and create a proper UI animation course, what are the demos/examples you want to see being taught? What's important to you? Built 1000s of demos but can't record them all...

And you could do the whole thing without JavaScript 🤙 • Use the HTML [popover] API (nested) • CSS starting-style to transition open/close ⭐️ • Anchor positioning ⚓️ <button popovertarget="menu"></button> <div popover="auto" id="menu"></div>

The tricks ✨ - Animate the custom property - Translate a word track using that property - Transition the translate - Use aria-hidden on the animated heading - Visually hide headings under the content sections

messin' with physics 👨‍🍳 text in the DOM, blocks on <canvas> ✨

Only left that part in to emphasize that the text isn't being rendered on the <canvas> 🤙 Can remove that with user-select if we need to 🚀

this isn't finished btw 🤙 left the text selection in there to prove the text wasn't rendered to canvas jus' gotta sort out resizing and turn the blocks into randomly sized logos 😎 then I'll do a video for the 'tube 🎬

fun CSS challenge regardless 😎