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.

Staggered Animation - CSS

Ali Reza

34,407 subscribers

63,571 views • 1 year ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

11 Comments

Daniel Cruz1 year ago

A classic awesome trick 🤌 Shameless plug : I once recorded a video for a text reveal using this same approach

Stephan Nijman1 year ago

Shameless plug warning!!! 🙈 I made a video a while ago that explains this technique!

Tea1 year ago

Impressive

حودة1 year ago

woow great

Bryan Stevens1 year ago

Clever!

Frank Romaña1 year ago

Nice!

Manshu Tusker1 year ago

I'm learning

AI geesehoward1 year ago

cool !

Misagh Momeni Bashusqeh1 year ago

✨😍

AfyaTelemed1 year ago

What tool gives you zoom functionality for video editing? Kindly let me know.

Ali Reza1 year ago

for Mac user

Related Videos

Recreate Github's homepage smooth scroll animation in pure CSS with animation-timeline:

Recreate Github's homepage smooth scroll animation in pure CSS with animation-timeline:

Builder.io

12,055 views • 1 year ago

the little details™ Use trigonometric functions in CSS to create a smooth staggered transition delay 🎬 .character { transition-delay: calc(sin((var(--index) / 12) * 45deg) * 0.475s); }

the little details™ Use trigonometric functions in CSS to create a smooth staggered transition delay 🎬 .character { transition-delay: calc(sin((var(--index) / 12) * 45deg) * 0.475s); }

jhey ʕ•ᴥ•ʔ

539,582 views • 2 years ago

Can't believe 3D CSS is having a renaissance 🥲 (Was pretty much my intro to CSS along with animation)

Can't believe 3D CSS is having a renaissance 🥲 (Was pretty much my intro to CSS along with animation)

jhey ʕ•ᴥ•ʔ

38,069 views • 2 years ago

Animation for a Halloween Ghost with CSS and JS 🎃👻

Animation for a Halloween Ghost with CSS and JS 🎃👻

Viki ✨

337,042 views • 2 years ago

"can I use it for images?" – Yep! ✅ Could even combine it with CSS scroll-driven animation CSS, am I right? 🔥

"can I use it for images?" – Yep! ✅ Could even combine it with CSS scroll-driven animation CSS, am I right? 🔥

jhey ʕ•ᴥ•ʔ

258,622 views • 2 years ago

Future CSS Tip! 🔮 You can power list animations like you would using IntersectionObserver with CSS scroll-driven animations and zero JS 🤯 el { animation: show; animation-timeline: view(); animation-range: entry; } keyframes show {0%{translate:0 50%;}} CodePen.IO link below! 👇

Future CSS Tip! 🔮 You can power list animations like you would using IntersectionObserver with CSS scroll-driven animations and zero JS 🤯 el { animation: show; animation-timeline: view(); animation-range: entry; } keyframes show {0%{translate:0 50%;}} CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

433,664 views • 2 years ago

in the audience, scratchin an itch: responsive #CSS scroll animation try it!

in the audience, scratchin an itch: responsive #CSS scroll animation try it!

Adam Argyle

39,374 views • 8 months ago

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,616 views • 3 years ago

css animation tip don't sleep on the devtools animation inspector — it's great for debugging and scrubbing your timelines 👇

css animation tip don't sleep on the devtools animation inspector — it's great for debugging and scrubbing your timelines 👇

jhey ʕ•ᴥ•ʔ

75,381 views • 11 months ago

#CSS only with scroll driven animation rad work Stijn Van Minnebruggen try it

#CSS only with scroll driven animation rad work Stijn Van Minnebruggen try it

Adam Argyle

12,041 views • 1 year ago

Scrolling parallax cards with CSS scroll animation 📜 article { scale: 0.8; animation: scale; animation-timeline: view(inline); animation-range: cover 40% cover 60%; } @keyframes scale { 50% { scale: 1; }}

Scrolling parallax cards with CSS scroll animation 📜 article { scale: 0.8; animation: scale; animation-timeline: view(inline); animation-range: cover 40% cover 60%; } @keyframes scale { 50% { scale: 1; }}

jhey ʕ•ᴥ•ʔ

95,508 views • 2 years ago

you can do this one with css grid, position: sticky, and some scroll animation 👨‍🍳

you can do this one with css grid, position: sticky, and some scroll animation 👨‍🍳

jhey ʕ•ᴥ•ʔ

206,779 views • 6 months ago

Similar technique 🤙 1. Take a scroll-snap list 2. Apply CSS scroll animations ✨ img { animation: flow; animation-timeline: --cover; } keyframes flow { 0% { transform: translate(-80%, 0) rotateY(-33deg); } } Few lines of CSS make it a progressively enhanced animated list 🔥

Similar technique 🤙 1. Take a scroll-snap list 2. Apply CSS scroll animations ✨ img { animation: flow; animation-timeline: --cover; } keyframes flow { 0% { transform: translate(-80%, 0) rotateY(-33deg); } } Few lines of CSS make it a progressively enhanced animated list 🔥

jhey ʕ•ᴥ•ʔ

114,209 views • 2 years ago

CSS position: sticky, scroll-snap + progressively enhanced scroll animation 📜 li { animation: bright; animation-range: calc(50% - 1lh) calc(50% + 1lh); animation-timeline: view(); scroll-snap-align: center; } @keyframes bright { 50% { opacity: 1; }}

CSS position: sticky, scroll-snap + progressively enhanced scroll animation 📜 li { animation: bright; animation-range: calc(50% - 1lh) calc(50% + 1lh); animation-timeline: view(); scroll-snap-align: center; } @keyframes bright { 50% { opacity: 1; }}

jhey ʕ•ᴥ•ʔ

366,000 views • 1 year ago

Responsive login form with fun animation ✨ Using HTML, CSS and JS. CodePen link below 👇

Responsive login form with fun animation ✨ Using HTML, CSS and JS. CodePen link below 👇

Viki ✨

401,492 views • 2 years ago

CSS blurred text reveal on scroll 📜 .character { animation: drop; animation-timeline: --section; animation-range: var(--start) var(--end); } @keyframes drop { 0% { filter: blur(10px); translate: 0 -75%; } } Inspo: daylight

CSS blurred text reveal on scroll 📜 .character { animation: drop; animation-timeline: --section; animation-range: var(--start) var(--end); } @keyframes drop { 0% { filter: blur(10px); translate: 0 -75%; } } Inspo: daylight

jhey ʕ•ᴥ•ʔ

104,890 views • 2 years ago

the trick: CSS mask, ::before/::after, background-size, animation-delay, and translate 👇 happy holidays! 🤙🎄

the trick: CSS mask, ::before/::after, background-size, animation-delay, and translate 👇 happy holidays! 🤙🎄

jhey ʕ•ᴥ•ʔ

103,712 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,955 views • 2 years ago

Scroll masking with CSS scroll animation as a progressive enhancement ⭐️ .scroller { animation: mask-up; animation-timeline: scroll(self); animation-range: 0 1rem; mask-composite: exclude; } @keyframes mask-up { to { mask-size: 100% 120px, 100% 100%; } }

Scroll masking with CSS scroll animation as a progressive enhancement ⭐️ .scroller { animation: mask-up; animation-timeline: scroll(self); animation-range: 0 1rem; mask-composite: exclude; } @keyframes mask-up { to { mask-size: 100% 120px, 100% 100%; } }

jhey ʕ•ᴥ•ʔ

584,723 views • 2 years ago

CSS scroll-driven contents island 🏖️ :root { animation: sync; animation-timeline: scroll(); counter-reset: p var(--p); } @keyframes sync { to {--p: 100;}} .p::before { content: counter(p) '%';}

CSS scroll-driven contents island 🏖️ :root { animation: sync; animation-timeline: scroll(); counter-reset: p var(--p); } @keyframes sync { to {--p: 100;}} .p::before { content: counter(p) '%';}

jhey ʕ•ᴥ•ʔ

153,024 views • 1 year ago