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.

Scroll snap + scroll driven animation carousel 💡 in the mobile size it looks a lot like the iOS app switcher eh? try it!?

Adam Argyle

58,587 subscribers

22,577 views • 1 year ago •via X (Twitter)

Education Science & Technology

Anya Rossi• Live Now

Private livecam show

7 Comments

Adam Argyle1 year ago

Rad on the Pixel Fold

Mathias Rando Juul1 year ago

It’s kind of ironic that it doesn’t work on iOS, though 😅 Hopefully much wider support for “native app feeling improving” features will follow with iOS 18 🤞

Adam Argyle1 year ago

They'll get there, it's a web standard, and a super rad one at that

Arby1 year ago

The legend! 🫶

Jamie Mason1 year ago

that's gorgeous

Jonathan Hamilton1 year ago

I'm going to have to do some homework on this on to figure out how this is working 😅

Harsh Gupta1 year ago

Will definitely use this!

Related Videos

#CSS feature faceoff: scroll triggered stuck nav (left) vs scroll driven animation nav (right) which do you prefer? try it (use Canary for the scroll-state() support)

#CSS feature faceoff: scroll triggered stuck nav (left) vs scroll driven animation nav (right) which do you prefer? try it (use Canary for the scroll-state() support)

Adam Argyle

12,321 views • 1 year 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

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

how you take an image list and turn it into a 3D scroll-driven carousel with CSS 🤙

how you take an image list and turn it into a 3D scroll-driven carousel with CSS 🤙

jhey ʕ•ᴥ•ʔ

57,717 views • 1 year ago

#CSS scroll-driven animation + scroll snap events synchronized with a number input scrollSnapChange is lazy: used to update the blue highlight feedback UX scrollSnapChanging is eager: used to immediately update the number input value to match the snapped item set to ship in Chrome 129 snap events available to try today in Canary behind the web experiments flag try it blog post in the works that'll give all the details and tons more demo's 🤘🏻

#CSS scroll-driven animation + scroll snap events synchronized with a number input scrollSnapChange is lazy: used to update the blue highlight feedback UX scrollSnapChanging is eager: used to immediately update the number input value to match the snapped item set to ship in Chrome 129 snap events available to try today in Canary behind the web experiments flag try it blog post in the works that'll give all the details and tons more demo's 🤘🏻

Adam Argyle

61,950 views • 1 year ago

With the new iOS 17 scroll view APIs, we can create a scroll animation like this with just a few lines of code. For more, check out the video👇

With the new iOS 17 scroll view APIs, we can create a scroll animation like this with just a few lines of code. For more, check out the video👇

Kavsoft

156,039 views • 2 years ago

I recreated the Google Antigravity website with Modern CSS. - Blog post: - Demo: Starting-Style, Houdini PaintWorklet, Scroll-Driven and Scroll-Triggered Animations, sibling-index(), Carousel, Scope, … #CSS

I recreated the Google Antigravity website with Modern CSS. - Blog post: - Demo: Starting-Style, Houdini PaintWorklet, Scroll-Driven and Scroll-Triggered Animations, sibling-index(), Carousel, Scope, … #CSS

Bramus

13,211 views • 6 months 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

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.

Soren

183,803 views • 7 months ago

CSS Tip! 📜 You can create scroll-driven micro-interactions with animation-timeline and custom properties 🔥 .search { animation: shrink; animation-timeline: scroll(); animation-range: 0 calc(var(--header-height) * 0.5); } @keyframes shrink { to { width: calc(100% - var(--button-size); } } The --header-height is being used to dictate the container height for the header. You can use that for the animation-range used across different scroll animations 🤙 For another example, you can animate the box-shadow reveal on the header once the search has stuck 🍡 header { animation: shadow; animation-timeline: scroll(); animation-range: var(--header-height) calc(var(--header-height) * 1.5); } @keyframes shadow { to { box-shadow: 0 5px 10px hsl(0 0% 0%); } } Then you have the little extras! 🧸🎈 Everything powered by the scroll() animation-timeline which hooks into the page scroll. And then using the --header-height in the different animation-range ✨ Give it a try! ⭐️ CodePen.IO link below! 👇

CSS Tip! 📜 You can create scroll-driven micro-interactions with animation-timeline and custom properties 🔥 .search { animation: shrink; animation-timeline: scroll(); animation-range: 0 calc(var(--header-height) * 0.5); } @keyframes shrink { to { width: calc(100% - var(--button-size); } } The --header-height is being used to dictate the container height for the header. You can use that for the animation-range used across different scroll animations 🤙 For another example, you can animate the box-shadow reveal on the header once the search has stuck 🍡 header { animation: shadow; animation-timeline: scroll(); animation-range: var(--header-height) calc(var(--header-height) * 1.5); } @keyframes shadow { to { box-shadow: 0 5px 10px hsl(0 0% 0%); } } Then you have the little extras! 🧸🎈 Everything powered by the scroll() animation-timeline which hooks into the page scroll. And then using the --header-height in the different animation-range ✨ Give it a try! ⭐️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

495,420 views • 2 years ago

you can create this dynamic mask using a progressive CSS scroll-driven animation 🧑‍🍳 the gist 👇 input { animation: in; animation-timeline: scroll(self inline); animation-range: 0 6ch; mask-position: 0 0; } @keyframes in { 0% { mask-position: -6ch 0; }}

you can create this dynamic mask using a progressive CSS scroll-driven animation 🧑‍🍳 the gist 👇 input { animation: in; animation-timeline: scroll(self inline); animation-range: 0 6ch; mask-position: 0 0; } @keyframes in { 0% { mask-position: -6ch 0; }}

jhey ʕ•ᴥ•ʔ

125,904 views • 1 year ago

Future CSS Tip! 🍏 You can create this Apple-style photo scroller by combining CSS scroll-driven animations and CSS scroll-snap 😍 Peep those changing captions 👀 No JS! img { animation: highlight both linear; animation-timeline: view(inline); 👈 Horizontal animation-range: cover 0% cover 50%; 👈 Finish } @ keyframes highlight { 50% { translate: 0 0; scale: var(--starting-scale); 👈 props opacity: var(--starting-opacity); 👈 } 100% { translate: 0 0; scale: 1; opacity: 1; } } Without the animation support, you get a standard unordered list containing some s 🤙 How do we swap the captions though? The "trick" is to use position: absolute on the figcaption and animate their opacity based on the ViewTimeline of their parent list item 😎 figcaption { animation: show both linear; animation-timeline: --list-item; } @ keyframes show { 0%, 45%, 55%, 100% { opacity: 0; } 50% { opacity: 1; } } li { view-timeline-name: --list-item; view-timeline-axis: inline; 👈 important! } The parent of the scroll track uses position: relative so all the captions sit in the middle even though they are in the right place for the markup 🙌 The last bit is the scroll-snap 🤙 Not much to it at all. Wrap the list and make it scrollable. Then add scroll-snap-type .wrapper { scroll-snap-type: x mandatory; overflow-x: scroll; } Then make sure each list item has scroll-snap-align set on it li { scroll-snap-align: center; } That's it! Pretty cool demo to put together and see how to do this stuff with these APIs 🤓 A lot of cool little tricks to pick up for writing your CSS! ⭐️ CodePen.IO link below! 👇

Future CSS Tip! 🍏 You can create this Apple-style photo scroller by combining CSS scroll-driven animations and CSS scroll-snap 😍 Peep those changing captions 👀 No JS! img { animation: highlight both linear; animation-timeline: view(inline); 👈 Horizontal animation-range: cover 0% cover 50%; 👈 Finish } @ keyframes highlight { 50% { translate: 0 0; scale: var(--starting-scale); 👈 props opacity: var(--starting-opacity); 👈 } 100% { translate: 0 0; scale: 1; opacity: 1; } } Without the animation support, you get a standard unordered list containing some s 🤙 How do we swap the captions though? The "trick" is to use position: absolute on the figcaption and animate their opacity based on the ViewTimeline of their parent list item 😎 figcaption { animation: show both linear; animation-timeline: --list-item; } @ keyframes show { 0%, 45%, 55%, 100% { opacity: 0; } 50% { opacity: 1; } } li { view-timeline-name: --list-item; view-timeline-axis: inline; 👈 important! } The parent of the scroll track uses position: relative so all the captions sit in the middle even though they are in the right place for the markup 🙌 The last bit is the scroll-snap 🤙 Not much to it at all. Wrap the list and make it scrollable. Then add scroll-snap-type .wrapper { scroll-snap-type: x mandatory; overflow-x: scroll; } Then make sure each list item has scroll-snap-align set on it li { scroll-snap-align: center; } That's it! Pretty cool demo to put together and see how to do this stuff with these APIs 🤓 A lot of cool little tricks to pick up for writing your CSS! ⭐️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

232,131 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

"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

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 Trick! ⚡️ You can use scroll-driven animation with background-attachment to create a dynamic glowing card scroller without JS 🔥 section { animation:vibe; animation-timeline:--list; } @keyframes vibe { to{--hue:320;}} .glow {background: hsl(var(--hue) 80% 50%);} Here's how! 🤙 You can use the background-attachment trick used in other glow card demos 😎 article { background-attachment: fixed; } The difference here is that you aren't going to update the fixed background position with your pointer this time. It can remain fixed. The magic part is that as you scroll, the background will leave the card that's leaving and enter the card that's entering ✨ For the extra background glow, you can use a fixed pseudo element on the list container itself 💪 Once that's in place, you're only task is to change the color of the background as you scroll 🤔 Create a custom property declaration for the --hue @property --base { inherits: true; syntax: ' '; initial-value: 0; } Then create an animation that updates this value @keyframes accent { to { --hue: 320; }} The last piece is hooking it up to scroll and there is a little trick in here 👀 First, you need an inline scroll-timeline on the list ul { scroll-timeline: --list inline; } Then you can use timeline-scope to hoist that scroll-timeline up so a parent can use it. You then animate the custom property on this element and let the value cascade down to the places that need it 🔥 section { timeline-scope: --list; animation: accent both linear; animation-timeline: --list; } For example, the glow uses the --hue this way [data-glow] { background-image: radial-gradient( 150px 150px at 50% 50%, hsl(var(--hue) 100% 70% / 0.25), transparent ); } Lastly, scroll-snap is optional of course but plays nice with the scroll-driven animation demos ✨ The key for that is ul { scroll-snap-type: x mandatory; } li { scroll-snap-align: center; } That's it! Pretty fun trick to play with! 🤓 Any questions, let me know! Should we add it to the video walkthrough list? CodePen.IO link below! 👇

CSS Trick! ⚡️ You can use scroll-driven animation with background-attachment to create a dynamic glowing card scroller without JS 🔥 section { animation:vibe; animation-timeline:--list; } @keyframes vibe { to{--hue:320;}} .glow {background: hsl(var(--hue) 80% 50%);} Here's how! 🤙 You can use the background-attachment trick used in other glow card demos 😎 article { background-attachment: fixed; } The difference here is that you aren't going to update the fixed background position with your pointer this time. It can remain fixed. The magic part is that as you scroll, the background will leave the card that's leaving and enter the card that's entering ✨ For the extra background glow, you can use a fixed pseudo element on the list container itself 💪 Once that's in place, you're only task is to change the color of the background as you scroll 🤔 Create a custom property declaration for the --hue @property --base { inherits: true; syntax: ' '; initial-value: 0; } Then create an animation that updates this value @keyframes accent { to { --hue: 320; }} The last piece is hooking it up to scroll and there is a little trick in here 👀 First, you need an inline scroll-timeline on the list ul { scroll-timeline: --list inline; } Then you can use timeline-scope to hoist that scroll-timeline up so a parent can use it. You then animate the custom property on this element and let the value cascade down to the places that need it 🔥 section { timeline-scope: --list; animation: accent both linear; animation-timeline: --list; } For example, the glow uses the --hue this way [data-glow] { background-image: radial-gradient( 150px 150px at 50% 50%, hsl(var(--hue) 100% 70% / 0.25), transparent ); } Lastly, scroll-snap is optional of course but plays nice with the scroll-driven animation demos ✨ The key for that is ul { scroll-snap-type: x mandatory; } li { scroll-snap-align: center; } That's it! Pretty fun trick to play with! 🤓 Any questions, let me know! Should we add it to the video walkthrough list? CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

116,462 views • 2 years ago

$A CSS scroll version of the gooey island 🤙 .island { filter: url(#svg-goo); } .island__avatar { animation: hide; animation-timeline: scroll(); animation-range: 0 var(--header-size); transform-origin: 50% 0; } @keyframes hide { to { translate: -50% -80px; scale: 0.3; } }$

A CSS scroll version of the gooey island 🤙 .island { filter: url(#svg-goo); } .island__avatar { animation: hide; animation-timeline: scroll(); animation-range: 0 var(--header-size); transform-origin: 50% 0; } @keyframes hide { to { translate: -50% -80px; scale: 0.3; } }

jhey ʕ•ᴥ•ʔ

154,664 views • 1 year 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

How does Apple make these crazy video transitions as you scroll? Let's recreate it with pure CSS with scroll-driven animations and view-timeline That's right, no scroll event listeners!

How does Apple make these crazy video transitions as you scroll? Let's recreate it with pure CSS with scroll-driven animations and view-timeline That's right, no scroll event listeners!

Steve (Builder.io)

113,931 views • 8 months ago

This looks like it would snap my back in half but I wanna try it anyway

This looks like it would snap my back in half but I wanna try it anyway

internet hall of fame

201,487 views • 7 months ago