Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

it's all about easing curves ⏱️ translation powered via CSS custom properties

jhey ʕ•ᴥ•ʔ

146,405 subscribers

64,278 views • 1 year ago •via X (Twitter)

Education Arts Science & Technology

Anya Rossi• Live Now

Private livecam show

7 Comments

jhey ▲🐻🎈1 year ago

originally seen on Dropbox branding could not resist doing a solution for it with scoped CSS custom properties 🤌 translate: 0 calc(var(--pow) * -40%) /*--pow 0-1 */ generate --pow with an easing function based on distance to pointer

jhey ▲🐻🎈1 year ago

here's the @CodePen so you can mess around with the pointer threshold, easing curves, etc. 🤙

Akool Inc1 year ago

🚨 Breaking News: The Trump family is making money moves—literally! 💸 Donald Trump just dropped his own cryptocurrency, the TRUMP Coin, and now Melania’s stepping in with her Melania Coin. 🪙💃 Is this the future of crypto or the ultimate political plot twist? 🤔 Whether you’re hodling or just LOLing, one thing’s for sure: these coins are yuge! 😂 🎥 P.S. All videos are created by Akool, the coolest Gen AI video platform! 🚀 Take your content to the next level with us! #Trump #Coin #Melania #CryptoPolitics #MakeCryptoGreatAgain #AltCoinEra #BlockchainBuzz #MadeWithAkool

Colton Batts1 year ago

easing and bezier makes all the difference. ✨

jeffscottworld (🛠️, 🤖, 🏡 )1 year ago

Is there a way to handle N elements programmatically with animations? Or do you have to statically output that css before hand? Maybe inline in JSX can work?

jhey ▲🐻🎈1 year ago

it does that part via an event listener on the parent so you can update the cards dynamically and it will work it out on the next move 🤙

Brandon McConnell1 year ago

snazzy! i’ve been meaning to get around to prototyping the same concept inspired by dropbox your creative touch on the transforms is so nice 👌🏼

Related Videos

Little CSS Christmas tree for the holidays 🎄 Powered by CSS custom properties 💪 ~100 lines of CSS The trick is in the animation-delay ✨ For example; <div class=🔴 style="--index: 2;"> .🔴 { animation-delay: calc(var(--index) * -0.2s); } CodePen.IO link below! 👇

Little CSS Christmas tree for the holidays 🎄 Powered by CSS custom properties 💪 ~100 lines of CSS The trick is in the animation-delay ✨ For example; <div class=🔴 style="--index: 2;"> .🔴 { animation-delay: calc(var(--index) * -0.2s); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

374,796 views • 3 years ago

I forgot to mention that every easing can also be used in pure CSS, no JS required, including the spring curves!

I forgot to mention that every easing can also be used in pure CSS, no JS required, including the spring curves!

Julian Garnier

44,253 views • 9 months ago

I got keyframe animations to work! Complete with custom animation curves per property. All properties are updated real-time, at 120fps!

I got keyframe animations to work! Complete with custom animation curves per property. All properties are updated real-time, at 120fps!

Jeff Broderick

10,862 views • 5 months ago

breakin' down classics CSS background-image + background-blend-mode + custom properties = holo-like effects with parallax ✨

breakin' down classics CSS background-image + background-blend-mode + custom properties = holo-like effects with parallax ✨

jhey ʕ•ᴥ•ʔ

42,712 views • 1 year ago

😎👋As promised, I've recreated it on @codepen ✨ I loved making it & animating the gradients🌈 Using: - CSS keyframes ✅ - CSS custom properties ✅ - CSS variables ✅ - NO JS ❌ Link: CrossBrowser incoming ➡️ #css #FrontEndDev

😎👋As promised, I've recreated it on @codepen ✨ I loved making it & animating the gradients🌈 Using: - CSS keyframes ✅ - CSS custom properties ✅ - CSS variables ✅ - NO JS ❌ Link: CrossBrowser incoming ➡️ #css #FrontEndDev

Luky - A$AP Luky

103,364 views • 3 years ago

your signature is a custom easing function™ ✒️ draw it map the motion to css linear() timing function package as portable SVG paste anywhere 👇

your signature is a custom easing function™ ✒️ draw it map the motion to css linear() timing function package as portable SVG paste anywhere 👇

jhey ʕ•ᴥ•ʔ

169,634 views • 1 month ago

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.

jhey ʕ•ᴥ•ʔ

112,034 views • 2 years ago

Nice little weekend project - Pure #CSS Pixar lamp. 💡 All of the axes movement is set using custom properties, so the motion can be easily animated with property. 😎 Live demo and full code CodePen.IO:

Nice little weekend project - Pure #CSS Pixar lamp. 💡 All of the axes movement is set using custom properties, so the motion can be easily animated with property. 😎 Live demo and full code CodePen.IO:

Amit Sheen

14,456 views • 2 years ago

Excited to announce Easing Wizard is now live! 🎉 The ultimate CSS easing editor with support for Bézier, spring, bounce, wiggle, and overshoot! 🚀 🔗 Some key features are: ⚡ Uses linear timing function instead of keyframes 🎢 Multiple curve types ⏸️ Pause between animation previews 🎥 10 preview modes 📚 Large collection of presets 📝 CSS and Tailwind CSS code generation 📊 Linear comparison 🎯 Multiple accuracy levels ➕ Optional extra space for Bézier curves And can you find the hidden easter egg?

Excited to announce Easing Wizard is now live! 🎉 The ultimate CSS easing editor with support for Bézier, spring, bounce, wiggle, and overshoot! 🚀 🔗 Some key features are: ⚡ Uses linear timing function instead of keyframes 🎢 Multiple curve types ⏸️ Pause between animation previews 🎥 10 preview modes 📚 Large collection of presets 📝 CSS and Tailwind CSS code generation 📊 Linear comparison 🎯 Multiple accuracy levels ➕ Optional extra space for Bézier curves And can you find the hidden easter egg?

Matthias Martin

13,307 views • 1 year ago

The CSS trick here is using custom properties to drive your CSS animation behavior 🤙 Doesn't have to be a scroll animation li:nth-of-type(odd) { --x: -4ch; } li:nth-of-type(even) { --x: 4ch; } @keyframes shift {50% { translate: var(--x) 0; }} Updates at runtime 🚀

The CSS trick here is using custom properties to drive your CSS animation behavior 🤙 Doesn't have to be a scroll animation li:nth-of-type(odd) { --x: -4ch; } li:nth-of-type(even) { --x: 4ch; } @keyframes shift {50% { translate: var(--x) 0; }} Updates at runtime 🚀

jhey ʕ•ᴥ•ʔ

239,989 views • 2 years ago

once you grasp CSS counters, then you can leverage the cascade 🧑‍🍳 content: counters(section, '.', pad) var(--t, ' '); need a certain section to start at a different number? use scoped custom properties 🫡

once you grasp CSS counters, then you can leverage the cascade 🧑‍🍳 content: counters(section, '.', pad) var(--t, ' '); need a certain section to start at a different number? use scoped custom properties 🫡

jhey ʕ•ᴥ•ʔ

57,768 views • 1 year ago

Exploring Webflow's Beta Custom CSS with native blobs

Exploring Webflow's Beta Custom CSS with native blobs

JP Dionisio

11,456 views • 2 years ago

View Transition powered drag n' drop! just drag events then swappin DOM, #CSS view transitions doin all the animation work (which it's GREAT AT) 🤯 that animated emoji don't miss a beat try it!

View Transition powered drag n' drop! just drag events then swappin DOM, #CSS view transitions doin all the animation work (which it's GREAT AT) 🤯 that animated emoji don't miss a beat try it!

Adam Argyle

351,554 views • 2 years ago

<genie-dialog> 🧞 shader where two easing curves control vertex staggered squeeze + translate

<genie-dialog> 🧞 shader where two easing curves control vertex staggered squeeze + translate

jhey ʕ•ᴥ•ʔ

51,198 views • 1 month ago

💡CSS Tip! Connecting two circles with an arrow is good, but it's even better if we can calculate and show the distance inside the arrow! 👀 Another cool demo powered by the future of CSS.

💡CSS Tip! Connecting two circles with an arrow is good, but it's even better if we can calculate and show the distance inside the arrow! 👀 Another cool demo powered by the future of CSS.

CSS by T. Afif

25,687 views • 6 months ago

curved scrollbar 👨‍🍳 powered by GSAP + CSS scroll-snap + SVG

curved scrollbar 👨‍🍳 powered by GSAP + CSS scroll-snap + SVG

jhey ʕ•ᴥ•ʔ

97,915 views • 1 year ago

It's all about the details for the Seattle Seahawks 😮‍💨 (via Seattle Seahawks)

It's all about the details for the Seattle Seahawks 😮‍💨 (via Seattle Seahawks)

NFL on ESPN

61,897 views • 1 month ago

Easily add a color mode switch with a couple prompts. 🎨 Utilizing Gemini 3 Flash in Antigravity: It replaced hex strings, removed inline styles, implemented CSS custom properties, and added persistent dark/light mode to the website.

Easily add a color mode switch with a couple prompts. 🎨 Utilizing Gemini 3 Flash in Antigravity: It replaced hex strings, removed inline styles, implemented CSS custom properties, and added persistent dark/light mode to the website.

Google Antigravity

54,693 views • 5 months ago

#CSS Radiento a bento box radio group design with View Transition animations plus custom "squish" easing from Open Props 🤓 ✅ grid layout ✅ no abs positions ✅ visual transition is an upgrade ✅ respects reduced motion ✅ keyboard still rocks

#CSS Radiento a bento box radio group design with View Transition animations plus custom "squish" easing from Open Props 🤓 ✅ grid layout ✅ no abs positions ✅ visual transition is an upgrade ✅ respects reduced motion ✅ keyboard still rocks

Adam Argyle

94,868 views • 3 years ago