Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,405 subscribers

64,278 görüntüleme • 1 yıl önce •via X (Twitter)

EğitimSanatBilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

7 Yorum

jhey ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈1 yıl önce

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 ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈1 yıl önce

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

Akool Inc profil fotoğrafı
Akool Inc1 yıl önce

🚨 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 Batts profil fotoğrafı
Colton Batts1 yıl önce

easing and bezier makes all the difference. ✨

jeffscottworld (🛠️, 🤖, 🏡 ) profil fotoğrafı
jeffscottworld (🛠️, 🤖, 🏡 )1 yıl önce

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 ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈1 yıl önce

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 McConnell profil fotoğrafı
Brandon McConnell1 yıl önce

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 👌🏼

Benzer Videolar

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! 👇
0:24

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 görüntüleme • 3 yıl önce

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

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 görüntüleme • 9 ay önce

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

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 görüntüleme • 5 ay önce

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

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

jhey ʕ•ᴥ•ʔ

42,712 görüntüleme • 1 yıl önce

😎👋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
0:26

😎👋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 görüntüleme • 3 yıl önce

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

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 görüntüleme • 1 ay önce

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.
0:25

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 görüntüleme • 2 yıl önce

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:
0:28

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 görüntüleme • 2 yıl önce

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?
0:40

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 görüntüleme • 1 yıl önce

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 🚀
0:38

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 görüntüleme • 2 yıl önce

This is what it's all about. 💜 (via Bleacher Report)
0:22

This is what it's all about. 💜 (via Bleacher Report)

Lakers Nation

88,385 görüntüleme • 1 yıl önce

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 🫡
0:30

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 görüntüleme • 1 yıl önce

Exploring Webflow's Beta Custom CSS with native blobs
0:21

Exploring Webflow's Beta Custom CSS with native blobs

JP Dionisio

11,456 görüntüleme • 2 yıl önce

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!
0:27

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 görüntüleme • 2 yıl önce

💡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.
0:22

💡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 görüntüleme • 6 ay önce

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

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

jhey ʕ•ᴥ•ʔ

51,198 görüntüleme • 1 ay önce

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

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

jhey ʕ•ᴥ•ʔ

97,915 görüntüleme • 1 yıl önce

#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
0:21

#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 görüntüleme • 3 yıl önce

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.
0:54

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 görüntüleme • 5 ay önce

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

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

NFL on ESPN

61,854 görüntüleme • 25 gün önce