Scroll driven animation with CSS animation-timeline: view(); animation-range: entry, exit;

Future CSS Tip! 🔮 Create that cool gallery effect... with the scroll-driven animations API 😎 ul, img { animation-timeline: scroll(root); 👈 animation: spin; } ul { --r: 270deg; } img { --r: -270deg; } keyframes spin { to { rotate: var(--r); }} CodePen.IO link below! 👇show more

CSS custom props and scroll animation for staggered effects... 🤙 h2 { animation: show; animation-timeline: view(); } .char { translate: 0 calc((1 - var(--s)) * 1lh); transition: translate 0.5s calc(sin(var(--i) / var(--t) * 45deg) * 0.5s); } @​keyframes show { to { --s: 1; }}show more

Stunning scroll-driven animation on tempo's homepage!

The power of @ property Without it → CSS... treats --progress as text → no animation With it → CSS knows it's percentage → smooth animationshow more

That SVG filter is the whole reason this CSS... scroll animation is even possible 🙏 (now with improved timing ✨)show more

Scroll-triggered animations are coming to Chrome early next year... (and we've been really excited about this one for a bit!) 🥳 Unlike scroll-driven animations (already in Chrome & Safari), this API introduces "timeline-trigger" and "animation-trigger" to start an animation within a specific range, rather than relying on the scroller completion *as* the animation timeline. I got nerd-sniped and wanted to try it out so I built this shape morphing demo to show how you can apply multiple animations to the same element over with different triggers. PRETTY COOL IMO! Bramus has a post with more info ⬇️show more

kinda wild how far you can get with CSS... alone a scroll animation tied to the content scroll powers the percentage update + icon animation interpolate-size provides a way to transition the popover between button size and content size using starting-style 🤙show more

Day 15: Mastering CSS Animation Inspired by

Slack logo animation + timeline

BBC logo animation + timeline

100% css 0% javascript Pretty cool that you can... run animations like this now off the main thread, was always a worry implementing a scroll animation knowing some users might see "jank" Safari and Firefox are sleeping far too long, scroll driven animations are awesomeshow more

Introducing Aniportrait: Audio-Driven Synthesis of Photorealistic Portrait Animation

CSS Tip! ⚡️ You could use CSS trig functions... to calculate animation-delay 🤓 Using them here with custom props for this DNA strand! 👩‍🔬 .node { animation-delay: calc( sin((var(--index) / var(--total)) * 45deg) 👈 * var(--speed) * -1s ); } CodePen.IO link below! 👇show more

No JavaScript needed 2 lines of CSS to create... a swipe animation ✨show more

IT'S WORKING! I finally got my custom Animator working... in Unity! Inspired by Dark Souls Animation Studio since my gameplay is mostly animation-driven. It can browse animation types and bypass Unity’s animation event limitations Small thread 👇 #gamedev #indiedev #madewithunityshow more

Animating React Aria Tabs, ToggleButtonGroup, etc. is about to... be super easy with the new SelectionIndicator component. 🥳 • Native CSS transitions, no animation library needed. • Works with SSR with no flicker before JS runs. • No ResizeObserver. • Enter + exit animations.show more

wavy carousel with CSS scroll driven animations not exactly... like OP but fun to try replicateshow more

Interactive scroll animation for Eden's updated home page ✨... Made in Framershow more

Quick animation practice with my OC Macy #animation #blender #3D