Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

CSS custom props and scroll animation for staggered effects 🤙 h2 { animation: show; animation-timeline: view(); } .char { translate: 0 calc((1 - var(--s)) * 1lh); transition: translate 0.5s calc(sin(var(--i) / var(--t) * 45deg) * 0.5s); } @​keyframes show { to { --s: 1; }}

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,035 subscribers

32,727 Aufrufe • vor 1 Jahr •via X (Twitter)

KunstBildungWissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

soon you won't need inline custom properties to create staggered motion delays in CSS ✨ .char { transition-delay: calc( sin( ((sibling-index() - 1) / sibling-count()) * 45deg) * 0.5s ); }
0:18

soon you won't need inline custom properties to create staggered motion delays in CSS ✨ .char { transition-delay: calc( sin( ((sibling-index() - 1) / sibling-count()) * 45deg) * 0.5s ); }

jhey ʕ•ᴥ•ʔ

120,836 Aufrufe • vor 1 Jahr

Use CSS custom properties and the sin() trigonometric function to give each character an eased animation-delay 🤙 .char { animation-delay: calc( sin((var(--index) / var(--total)) * 90deg) * var(--duration) ); }
0:17

Use CSS custom properties and the sin() trigonometric function to give each character an eased animation-delay 🤙 .char { animation-delay: calc( sin((var(--index) / var(--total)) * 90deg) * var(--duration) ); }

jhey ʕ•ᴥ•ʔ

280,847 Aufrufe • vor 1 Jahr

CSS Tip! ⚡️ You could use CSS trig functions to calculate animation-delay 🤓 Using them here with custom props for this DNA strand! 👩‍🔬 .node { animation-delay: calc( sin((var(--index) / var(--total)) * 45deg) 👈 * var(--speed) * -1s ); } CodePen.IO link below! 👇
0:14

CSS Tip! ⚡️ You could use CSS trig functions to calculate animation-delay 🤓 Using them here with custom props for this DNA strand! 👩‍🔬 .node { animation-delay: calc( sin((var(--index) / var(--total)) * 45deg) 👈 * var(--speed) * -1s ); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

182,528 Aufrufe • vor 3 Jahren

he watches for your email ┬┴┬┴┤•ᴥ•ʔ├┬┴┬┴ form:has(:invalid:not(:placeholder-shown)) { --show: 1; } .bear { translate: 0 calc(-100% * var(--show)); transition: translate 0.4s 0.2s ease-out; }
0:17

he watches for your email ┬┴┬┴┤•ᴥ•ʔ├┬┴┬┴ form:has(:invalid:not(:placeholder-shown)) { --show: 1; } .bear { translate: 0 calc(-100% * var(--show)); transition: translate 0.4s 0.2s ease-out; }

jhey ʕ•ᴥ•ʔ

27,313 Aufrufe • vor 1 Jahr

Fine. Real-life CSS lesson 🧑‍🍳🍕 .topping { translate: calc(var(--x, 0) * 1cqi) calc(var(--y, 0) * 1cqi); transition: translate 0.2s; } [id=slide]:checked ~ .scene .topping { --x: 100; } cc David East
0:17

Fine. Real-life CSS lesson 🧑‍🍳🍕 .topping { translate: calc(var(--x, 0) * 1cqi) calc(var(--y, 0) * 1cqi); transition: translate 0.2s; } [id=slide]:checked ~ .scene .topping { --x: 100; } cc David East

jhey ʕ•ᴥ•ʔ

154,620 Aufrufe • vor 2 Jahren

one trick behind this demo 👇🎞️ .images { translate: 0 calc(var(--active) * 1lh); } translate a container that holds the images with the line-height unit lean into CSS custom properties and use JavaScript to update the values 🤙
0:18

one trick behind this demo 👇🎞️ .images { translate: 0 calc(var(--active) * 1lh); } translate a container that holds the images with the line-height unit lean into CSS custom properties and use JavaScript to update the values 🤙

jhey ʕ•ᴥ•ʔ

46,527 Aufrufe • vor 1 Jahr

extra detail: animate a CSS custom property from 0 to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);
0:10

extra detail: animate a CSS custom property from 0 to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);

jhey ʕ•ᴥ•ʔ

77,042 Aufrufe • vor 1 Jahr

CSS Tip! ✨ You can transition grid tracks 👀 button:hover { --h: 1; } button { transition: grid-template-columns 0.2s; grid-template-columns: calc(var(--icon) * (1 - var(--h))) 1fr calc(var(--icon) * var(--h)); } Rad for this button concept! 🤙 CodePen.IO link below! 👇
0:10

CSS Tip! ✨ You can transition grid tracks 👀 button:hover { --h: 1; } button { transition: grid-template-columns 0.2s; grid-template-columns: calc(var(--icon) * (1 - var(--h))) 1fr calc(var(--icon) * var(--h)); } Rad for this button concept! 🤙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

107,091 Aufrufe • vor 3 Jahren

Scroll driven animation with CSS animation-timeline: view(); animation-range: entry, exit;
0:11

Scroll driven animation with CSS animation-timeline: view(); animation-range: entry, exit;

Solarin

20,995 Aufrufe • vor 1 Jahr

Nice opportunity for transitioning CSS grid columns with :has() && linear() 🤙 label { --selected: 0; grid-template-columns: auto calc(var(--selected) * 20px); } label svg { opacity: var(--selected); } label:has(:checked) { --selected: 1; }
0:19

Nice opportunity for transitioning CSS grid columns with :has() && linear() 🤙 label { --selected: 0; grid-template-columns: auto calc(var(--selected) * 20px); } label svg { opacity: var(--selected); } label:has(:checked) { --selected: 1; }

jhey ʕ•ᴥ•ʔ

225,147 Aufrufe • vor 1 Jahr

Future CSS Tip! 🔮 Create that cool gallery effect with the scroll-driven animations API 😎 ul, img { animation-timeline: scroll(root); 👈 animation: spin; } ul { --r: 270deg; } img { --r: -270deg; } keyframes spin { to { rotate: var(--r); }} CodePen.IO link below! 👇
0:15

Future CSS Tip! 🔮 Create that cool gallery effect with the scroll-driven animations API 😎 ul, img { animation-timeline: scroll(root); 👈 animation: spin; } ul { --r: 270deg; } img { --r: -270deg; } keyframes spin { to { rotate: var(--r); }} CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

111,185 Aufrufe • vor 3 Jahren

CSS Tip! ✨ Combine :has() and trig functions to select previous siblings and create an Apple-style OS dock 🔥 CSS only, no JS! 🤯 .b:has(+ .b:hover), .b:hover + .b { flex: calc(0.2 + (sin(30deg) * 1.5)); translate: 0 calc(sin(30deg) * -75%); } CodePen.IO link below! 👇
0:17

CSS Tip! ✨ Combine :has() and trig functions to select previous siblings and create an Apple-style OS dock 🔥 CSS only, no JS! 🤯 .b:has(+ .b:hover), .b:hover + .b { flex: calc(0.2 + (sin(30deg) * 1.5)); translate: 0 calc(sin(30deg) * -75%); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

517,428 Aufrufe • vor 2 Jahren

kinda wild how far you can get with CSS alone a scroll animation tied to the content scroll powers the percentage update + icon animation interpolate-size provides a way to transition the popover between button size and content size using starting-style 🤙
0:17

kinda wild how far you can get with CSS alone a scroll animation tied to the content scroll powers the percentage update + icon animation interpolate-size provides a way to transition the popover between button size and content size using starting-style 🤙

jhey ʕ•ᴥ•ʔ

120,663 Aufrufe • vor 1 Jahr

CSS Tip! ✨ Did you know you can animate CSS Grid tracks? 👀 ul:is(:hover,:focus-within) {--active: 1;} ul { grid-template-columns: auto repeat(3, calc(10px + (var(--active) * 100px))); transition: all 0.2s; } Adjust layouts based on interaction! 😎 CodePen.IO link below! 👇
0:18

CSS Tip! ✨ Did you know you can animate CSS Grid tracks? 👀 ul:is(:hover,:focus-within) {--active: 1;} ul { grid-template-columns: auto repeat(3, calc(10px + (var(--active) * 100px))); transition: all 0.2s; } Adjust layouts based on interaction! 😎 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

30,561 Aufrufe • vor 3 Jahren

UI && CSS Tip! 🚀 You can use View Transitions to create that Radix by WorkOS style theme switcher 👀 ::view-transition-new(root) { animation: reveal;} keyframes reveal { 0% { clip-path: polygon(...);} /* Code 👇 */ } Animate clip-path between modes 😍 CodePen.IO link below! 👇
0:18

UI && CSS Tip! 🚀 You can use View Transitions to create that Radix by WorkOS style theme switcher 👀 ::view-transition-new(root) { animation: reveal;} keyframes reveal { 0% { clip-path: polygon(...);} /* Code 👇 */ } Animate clip-path between modes 😍 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

232,919 Aufrufe • vor 2 Jahren

don't know the size of a container in CSS? container query units 🤝 translate a:hover .corner:nth-of-type(odd) { translate: 100cqi 0; } /* hover intent */ a:hover .corner { transition: translate 0.26s 0.12s; } adapts to content size 👇
0:16

don't know the size of a container in CSS? container query units 🤝 translate a:hover .corner:nth-of-type(odd) { translate: 100cqi 0; } /* hover intent */ a:hover .corner { transition: translate 0.26s 0.12s; } adapts to content size 👇

jhey ʕ•ᴥ•ʔ

65,006 Aufrufe • vor 1 Jahr

Offside VAR-Style Animation 🔥🔥 #eFootball2025
0:17

Offside VAR-Style Animation 🔥🔥 #eFootball2025

Prottoy Pes Official

15,151 Aufrufe • vor 1 Jahr

corey in the house Call me crazy but I prefer seasons 2-3 animation Yes season 1's animation is *technically* better, but the occasional over-the-top expressions fit the chaotic and zany nature of the show more imo
0:06

corey in the house Call me crazy but I prefer seasons 2-3 animation Yes season 1's animation is *technically* better, but the occasional over-the-top expressions fit the chaotic and zany nature of the show more imo

Internet Stranger

22,240 Aufrufe • vor 1 Jahr

Holy crap. Some of the best effects animation from this show.
0:14

Holy crap. Some of the best effects animation from this show.

Xtrull

68,016 Aufrufe • vor 1 Jahr