content wave with CSS scroll animation li { animation: grow both var(--custom-in-out-ease); animation-timeline: view(inline); } @​keyframes grow { 50% { width: var(--desired-size); } } bonus javascript for drag to scroll with inertia ✨

yes – you should try to avoid animating properties like "width" 💯 but sometimes you make that trade-off depending on what you're doing (some well-known libs do this a lot of the time 👀) here's the @CodePen 🤙

I just launched an all-in-one template for cross-platform development, based on the stack I use myself everyday. Expo, NextJS, TypeScript, Tailwind, Firebase, AppsFlyer, Authentication, Analytics, In-App Purchases, Stripe and a lot more, setup by default.

CSS scroll animations are like sprinkles on a cupcake—small but so satisfying when done right.

Beaut

Animation has gotten as powerful I swear.

Lovely implementation jhey. Had the same thought around animating width / height but worth the trade off in the end.

thanks for sharing yours Will 🙏 totally - much better than trying to work out the scaling equivalent whilst maintaining the gap 💀

Bless you for the in-out ease. 🙏