Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

139,666 subscribers

64,029 Aufrufe • vor 1 Jahr •via X (Twitter)

BildungKunstWissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

7 Kommentare

Profilbild von jhey ▲🐻🎈
jhey ▲🐻🎈vor 1 Jahr

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

Profilbild von jhey ▲🐻🎈
jhey ▲🐻🎈vor 1 Jahr

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

Profilbild von Akool Inc
Akool Incvor 1 Jahr

🚨 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

Profilbild von Colton Batts
Colton Battsvor 1 Jahr

easing and bezier makes all the difference. ✨

Profilbild von jeffscottworld (🛠️, 🤖, 🏡 )
jeffscottworld (🛠️, 🤖, 🏡 )vor 1 Jahr

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?

Profilbild von jhey ▲🐻🎈
jhey ▲🐻🎈vor 1 Jahr

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 🤙

Profilbild von Brandon McConnell
Brandon McConnellvor 1 Jahr

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

Ähnliche 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! 👇
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 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 9 Monaten

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 Aufrufe • vor 5 Monaten

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 Aufrufe • vor 1 Jahr

😎👋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,277 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 1 Monat

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 2 Jahren

<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 Aufrufe • vor 1 Monat

💡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 Aufrufe • vor 5 Monaten

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

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

jhey ʕ•ᴥ•ʔ

97,915 Aufrufe • vor 1 Jahr

#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 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 4 Monaten

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 Aufrufe • vor 20 Tagen

Anime.js 4.2.0 is out! 🧩 All modules can now be imported individually with subpaths 🎨 CSS variable values support 🏹 Simpler spring API with bounce & duration params 📈 More WAAPI built-in easing functions 🎛️ And an easing editor! Plus tons of fixes and improvements!
0:38

Anime.js 4.2.0 is out! 🧩 All modules can now be imported individually with subpaths 🎨 CSS variable values support 🏹 Simpler spring API with bounce & duration params 📈 More WAAPI built-in easing functions 🎛️ And an easing editor! Plus tons of fixes and improvements!

Julian Garnier

292,784 Aufrufe • vor 9 Monaten