Загрузка видео...

Не удалось загрузить видео

На главную

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

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,405 subscribers

64,278 просмотров • 1 год назад •via X (Twitter)

ОбразованиеИскусствоНаука и технологии
LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 7

Фото профиля jhey ▲🐻🎈
jhey ▲🐻🎈1 год назад

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 ▲🐻🎈
jhey ▲🐻🎈1 год назад

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

Фото профиля Akool Inc
Akool Inc1 год назад

🚨 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
Colton Batts1 год назад

easing and bezier makes all the difference. ✨

Фото профиля jeffscottworld (🛠️, 🤖, 🏡 )
jeffscottworld (🛠️, 🤖, 🏡 )1 год назад

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 ▲🐻🎈
jhey ▲🐻🎈1 год назад

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
Brandon McConnell1 год назад

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

Похожие видео

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 просмотров • 3 лет назад

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 просмотров • 5 месяцев назад

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 просмотров • 9 месяцев назад

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 просмотров • 1 год назад

😎👋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 просмотров • 3 лет назад

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 просмотров • 1 месяц назад

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 просмотров • 2 лет назад

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 просмотров • 2 лет назад

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 просмотров • 1 год назад

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 просмотров • 2 лет назад

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 просмотров • 1 год назад

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

Exploring Webflow's Beta Custom CSS with native blobs

JP Dionisio

11,456 просмотров • 2 лет назад

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 просмотров • 2 лет назад

💡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 просмотров • 6 месяцев назад

<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 просмотров • 1 месяц назад

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

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

jhey ʕ•ᴥ•ʔ

97,915 просмотров • 1 год назад

#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 просмотров • 3 лет назад

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 просмотров • 5 месяцев назад

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 просмотров • 26 дней назад