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.

CSS Scroll-Snapping + GSAP ScrollTrigger 🙀 What a lovely combo! I didn't know anything about #css scroll-snapping until studying a recent demo from Julio Rodriguez (linked below). I wanted to build my own simplified version from scratch to understand it better. Notice how the animated list of headers always... show more

Carl 💥 Creative Coding Club

6,084 subscribers

29,409 views • 1 year ago •via X (Twitter)

Arts Education Science & Technology #css

Anya Rossi• Live Now

Private livecam show

8 Comments

Carl 💥 Creative Coding Club1 year ago

Here's my "basic" demo using @greensock's ScrollTrigger with CSS Scroll-Snapping

Carl 💥 Creative Coding Club1 year ago

This is the inspiring, extra-fancy @jh3yy version And you can get in on his newsletter here:

Sam Sen | Web & Digital Design1 year ago

@jhey Looks awesome!

crapthings1 year ago

@jhey cool

Dan Florian1 year ago

@jhey Works in safari. That’s a shocker 😮

Armando J. Perez-Carreno1 year ago

@jhey Love the demo

Carl 💥 Creative Coding Club1 year ago

@jhey Thanks!!!

Andy1 year ago

@jhey Removing the scroll-snap CSS in html { } and li { } doesn’t change the demo behavior at all. It looks like GSAP does all the lifting.

Related Videos

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 ʕ•ᴥ•ʔ

234,583 views • 2 years ago

My Portfolio is live! At least the first Version. For now only in German. English will be added later. Didn't finished everything I wanted, but this will be a work in progress. Not everything is accessible. Didn't added all Figma Layouts yet. But it's enough to launch it now, so I can happily go to vacation 🙂 ⚙️ Tech Stack: Webflow (Webflow) GSAP (GSAP) (Core, CustomEase) Locomotive Scroll v5 (Locomotive®) Osmo (Osmo) (Mouse Follower) Custom CSS & JS The coolest part is that I documented everything inside my social media profiles. X: 150 Posts LinkedIn: 90 Posts Instagram: 23 Posts All Posts from just one Project. This Project was also a big learning playground for me. I don't really did much animation stuff before, didn't really used GSAP or Locomotive Scroll. Added so many modules where I actually didn't know how to build it first. And this shows how much you can learn by just building stuff. Especially stuff where you don't know at first how to build it. Fun fact: I call it always Portfolio, but there are no projects. It's because I don't have any yet which shows what Websites I want to make. Therefore this Site should speak for itself for now. Check it out live! 🔗Link in the comments.

My Portfolio is live! At least the first Version. For now only in German. English will be added later. Didn't finished everything I wanted, but this will be a work in progress. Not everything is accessible. Didn't added all Figma Layouts yet. But it's enough to launch it now, so I can happily go to vacation 🙂 ⚙️ Tech Stack: Webflow (Webflow) GSAP (GSAP) (Core, CustomEase) Locomotive Scroll v5 (Locomotive®) Osmo (Osmo) (Mouse Follower) Custom CSS & JS The coolest part is that I documented everything inside my social media profiles. X: 150 Posts LinkedIn: 90 Posts Instagram: 23 Posts All Posts from just one Project. This Project was also a big learning playground for me. I don't really did much animation stuff before, didn't really used GSAP or Locomotive Scroll. Added so many modules where I actually didn't know how to build it first. And this shows how much you can learn by just building stuff. Especially stuff where you don't know at first how to build it. Fun fact: I call it always Portfolio, but there are no projects. It's because I don't have any yet which shows what Websites I want to make. Therefore this Site should speak for itself for now. Check it out live! 🔗Link in the comments.

Eduard Bodak

50,638 views • 1 year ago

If you are planning to start a company, you should understand every aspect of the business. I plan to start my own construction company in El Salvador so everyday I am out here working with my amigos. 6 months from know I will know every aspect of how to build homes out of block. I thought it would be easy to build in El Salvador. I can build a house in the U.S. from scratch but down here. It’s completely different. They use almost zero wood to build houses. Everything is block and concrete

If you are planning to start a company, you should understand every aspect of the business. I plan to start my own construction company in El Salvador so everyday I am out here working with my amigos. 6 months from know I will know every aspect of how to build homes out of block. I thought it would be easy to build in El Salvador. I can build a house in the U.S. from scratch but down here. It’s completely different. They use almost zero wood to build houses. Everything is block and concrete

RyanMatta 🇺🇸 🦅

51,826 views • 9 days ago

We're growing. 👀 MegPrime Pay is looking for a Web3 Content Creator to join the team. If you live and breathe crypto, understand the culture and know how to create content that actually stops the scroll — we want to hear from you. This is your chance to be part of something big from the ground up. 💜 Apply here 👇 🔗 [link in comments]

We're growing. 👀 MegPrime Pay is looking for a Web3 Content Creator to join the team. If you live and breathe crypto, understand the culture and know how to create content that actually stops the scroll — we want to hear from you. This is your chance to be part of something big from the ground up. 💜 Apply here 👇 🔗 [link in comments]

MegPrimePay

65,059 views • 3 months ago

Welcome to 👉 I’ve always hated trying to build my own rankings on generic tier builder sites. They weren’t built for fantasy football, they were clunky to use, and I could never get them to look the way I wanted. So I decided to build the tool I always wished existed for just us fantasy nerds. Build your own drag-and-drop tier boards, customize them, export clean graphics for X or YouTube, compare your rankings against mine, other creators, and expert consensus boards. This is only Version 1. I’ve got a long list of ideas I want to build into this thing, but I wanted to get it into your hands first and build it with feedback from the community. Tell me how I can make it better for you and I will do my best. For now, I genuinely hope it becomes something that helps people build better rankings, have better discussions, and ultimately win more fantasy leagues. Would love for you guys to check it out and let me know what you think. Here's a quick promo 👇

Welcome to 👉 I’ve always hated trying to build my own rankings on generic tier builder sites. They weren’t built for fantasy football, they were clunky to use, and I could never get them to look the way I wanted. So I decided to build the tool I always wished existed for just us fantasy nerds. Build your own drag-and-drop tier boards, customize them, export clean graphics for X or YouTube, compare your rankings against mine, other creators, and expert consensus boards. This is only Version 1. I’ve got a long list of ideas I want to build into this thing, but I wanted to get it into your hands first and build it with feedback from the community. Tell me how I can make it better for you and I will do my best. For now, I genuinely hope it becomes something that helps people build better rankings, have better discussions, and ultimately win more fantasy leagues. Would love for you guys to check it out and let me know what you think. Here's a quick promo 👇

Dynasty Angle

23,947 views • 1 month ago

Future CSS Tip! ⚡️ You can use scroll-driven animations to drive sprite animations 🎞️ No JavaScript, off the main thread 🔥 img { animation: play both steps(var(--frames)) var(--runs); animation-timeline: scroll(); } @ keyframes play { to { object-position: 100% 0; } } The trick is animating a "film strip" with object-position and the steps animation-timing function 🎬 Check out this sprite animation set to a higher play count and how the stepped easing makes a difference to the sprite 🤙 This opens up a bunch of possibilities where the image is animated off the main thread and you can bring in complex things via sprite 👀 Showing the sprite is intended to help you understand how object-position is being animated 🤙 Become the director! 😅 CodePen.IO link below! 👇

Future CSS Tip! ⚡️ You can use scroll-driven animations to drive sprite animations 🎞️ No JavaScript, off the main thread 🔥 img { animation: play both steps(var(--frames)) var(--runs); animation-timeline: scroll(); } @ keyframes play { to { object-position: 100% 0; } } The trick is animating a "film strip" with object-position and the steps animation-timing function 🎬 Check out this sprite animation set to a higher play count and how the stepped easing makes a difference to the sprite 🤙 This opens up a bunch of possibilities where the image is animated off the main thread and you can bring in complex things via sprite 👀 Showing the sprite is intended to help you understand how object-position is being animated 🤙 Become the director! 😅 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

187,392 views • 3 years ago

How to build a standout brand in 2026 ✨ I’m working on a YouTube video where I show my full process of building a brand identity from scratch - how I use Midjourney to create an awesome style, what tools I use, and the coolest part, how to build your own tools with AI and vibe coding to create unique textures, effects, and animations no one else has. If this sounds like something you’d watch, share it and drop a kind word below. 👇

Alexandr.

72,335 views • 5 months ago

e-comm bros have terrible taste i recently tried Hyperagent to build my own “taste test” tool to help you fight this it’s trained on hundreds of ads and product photography that i hand curated how it works: upload your ad or photo, and ask it to give you a taste score. it’ll give you a score out 100, and a detailed breakdown of what to do to “fix” it (if necessary) sign-up with the link below and get $200 in credits to try my agent or build your own

e-comm bros have terrible taste i recently tried Hyperagent to build my own “taste test” tool to help you fight this it’s trained on hundreds of ads and product photography that i hand curated how it works: upload your ad or photo, and ask it to give you a taste score. it’ll give you a score out 100, and a detailed breakdown of what to do to “fix” it (if necessary) sign-up with the link below and get $200 in credits to try my agent or build your own

techbimbo

264,084 views • 1 month ago

"When I got the job, I didn't want to make a lot of rash decisions and jump to anything really quick. I wanted to have some time to sit back, evaluate, look at it and kind of figure out what the best thing to do was. Wanted to be calculated in how I handled it and I thought today was the right time." Mike Kafka talks about the timing of firing Shane Bowen now:

"When I got the job, I didn't want to make a lot of rash decisions and jump to anything really quick. I wanted to have some time to sit back, evaluate, look at it and kind of figure out what the best thing to do was. Wanted to be calculated in how I handled it and I thought today was the right time." Mike Kafka talks about the timing of firing Shane Bowen now:

SNY Giants

81,012 views • 9 months ago

Introducing Prism UI ✨ A UI library built on top of shadcn components to create beautiful pages 🪄 Animated components that are build on shadcn, Tailwind CSS and framer motion. 100% Free and Open Source I have drawn inspiration from two main sources ◆ shadcn - The foundation and the 🐐 ◆ Steven Tey - The clean, modern UI/UX seen in dub has been a huge inspiration Tech Stack: Vercel shadcn Framer Tailwind CSS v0 Matt Perry (framer motion) This was my holiday project - Hope you like it 🖤 #opensource #buildinpublic

Introducing Prism UI ✨ A UI library built on top of shadcn components to create beautiful pages 🪄 Animated components that are build on shadcn, Tailwind CSS and framer motion. 100% Free and Open Source I have drawn inspiration from two main sources ◆ shadcn - The foundation and the 🐐 ◆ Steven Tey - The clean, modern UI/UX seen in dub has been a huge inspiration Tech Stack: Vercel shadcn Framer Tailwind CSS v0 Matt Perry (framer motion) This was my holiday project - Hope you like it 🖤 #opensource #buildinpublic

CodeHagen

241,680 views • 1 year ago

🚨 Longsnappers 🚨 When I first started snapping, it felt awkward and uncomfortable. My form was off, my timing was bad, and I was wildly inconsistent. On JV, I learned from our varsity snapper—he understood the basics, but he taught me a hitch in my motion that threw my snaps completely out of timing. Eventually, I heard about Rubio Long Snapping® and started driving up to Irvine every other week for group lessons. That’s where my development really took off and I began to grow into a consistent snapper. I know some of you might not have access to quality instruction or may have never been properly introduced to the fundamentals of long snapping. If that’s you (or your child), bookmark this post! Find a resource. Seek out coaching. It makes all the difference. I offer both in-person lessons here in San Diego and virtual lessons, and I’m passionate about helping the next generation master their craft, excel in high school, and earn opportunities at the next level. Drills inspired by: Rubio Long Snapping® #longsnapper #longsnapping

🚨 Longsnappers 🚨 When I first started snapping, it felt awkward and uncomfortable. My form was off, my timing was bad, and I was wildly inconsistent. On JV, I learned from our varsity snapper—he understood the basics, but he taught me a hitch in my motion that threw my snaps completely out of timing. Eventually, I heard about Rubio Long Snapping® and started driving up to Irvine every other week for group lessons. That’s where my development really took off and I began to grow into a consistent snapper. I know some of you might not have access to quality instruction or may have never been properly introduced to the fundamentals of long snapping. If that’s you (or your child), bookmark this post! Find a resource. Seek out coaching. It makes all the difference. I offer both in-person lessons here in San Diego and virtual lessons, and I’m passionate about helping the next generation master their craft, excel in high school, and earn opportunities at the next level. Drills inspired by: Rubio Long Snapping® #longsnapper #longsnapping

Drew Ferris

75,599 views • 1 year ago

PulseX is so cool! For those of you that didn't know. PulseX is one of the most decentralized DEXs in existence. You can literally run it locally on your own machine and it's so simple to set up. Running it on your own machine makes it faster, more secure, safer, more censorship resistant and protects your privacy. There's no reason you should be using the web version when you have the desktop version available. I made a short video showing you how to download it. Here is the link to the PulseX download page (always triple check links, even from me)

PulseX is so cool! For those of you that didn't know. PulseX is one of the most decentralized DEXs in existence. You can literally run it locally on your own machine and it's so simple to set up. Running it on your own machine makes it faster, more secure, safer, more censorship resistant and protects your privacy. There's no reason you should be using the web version when you have the desktop version available. I made a short video showing you how to download it. Here is the link to the PulseX download page (always triple check links, even from me)

SHILL GATES

31,941 views • 1 year ago

I was taught that if you want to make your community a better place, it's up to you to fix it. That is why I am announcing my candidacy to be the next Conservative Party (Conservative Party) candidate for Richmond Centre - Marpole. People from every corner of the world have chosen to call Richmond and Marpole their home. They came here to build a better life for themselves and their families. The same goes for my family. Eight years of Justin Trudeau and his government have put that promise of a better life for the next generation at risk. I want to help Pierre Poilievre and the rest of his team restore common sense in Ottawa. I want to be your representative to get that done. Watch my video below. Click here to learn more, support my campaign and buy a membership!

I was taught that if you want to make your community a better place, it's up to you to fix it. That is why I am announcing my candidacy to be the next Conservative Party (Conservative Party) candidate for Richmond Centre - Marpole. People from every corner of the world have chosen to call Richmond and Marpole their home. They came here to build a better life for themselves and their families. The same goes for my family. Eight years of Justin Trudeau and his government have put that promise of a better life for the next generation at risk. I want to help Pierre Poilievre and the rest of his team restore common sense in Ottawa. I want to be your representative to get that done. Watch my video below. Click here to learn more, support my campaign and buy a membership!

Zach Segal

18,757 views • 2 years ago

I asked Paul Pierce on if he reached out to Jayson Tatum at all since his return “This will be my first time today, seeing him saying something to him. So, you know the thing about, I know about guys when they get in a situation Jayson was in, you know, I had to be, I had a chance to be around Kevin [Garnett] when he was going through his injury and stuff. Sometimes you want to give people some space. I did. I reached out to him one time, I think, via text throughout the process. But, you know, I think it's a moment to where you want to put yourself in a place, to where you're isolated and you want to grind, you want to work to get back where you need to go. And I'm sure everybody was showing support, but I showed my support from far, and he knows I'm always there for him if he ever needed anything.”

I asked Paul Pierce on if he reached out to Jayson Tatum at all since his return “This will be my first time today, seeing him saying something to him. So, you know the thing about, I know about guys when they get in a situation Jayson was in, you know, I had to be, I had a chance to be around Kevin [Garnett] when he was going through his injury and stuff. Sometimes you want to give people some space. I did. I reached out to him one time, I think, via text throughout the process. But, you know, I think it's a moment to where you want to put yourself in a place, to where you're isolated and you want to grind, you want to work to get back where you need to go. And I'm sure everybody was showing support, but I showed my support from far, and he knows I'm always there for him if he ever needed anything.”

Ian Inangelo

151,703 views • 5 months ago

Kawhi Leonard says he draws inspiration from anyone who works on their craft — from athletes to producers, rappers, and construction workers. “With any craft… they always talk about the work and the consistency. All the greats in any genre. Any aspect of a craftsmanship. It’s always about work. Listening to music and studying different craftsmanship. Basketball or just anything. Construction worker, people building houses. It’s always about that extra work and the extra hours you put in. So that’s what I took into my craft and wanted to be the best, or one of the best to play. And that’s what I did.”

Kawhi Leonard says he draws inspiration from anyone who works on their craft — from athletes to producers, rappers, and construction workers. “With any craft… they always talk about the work and the consistency. All the greats in any genre. Any aspect of a craftsmanship. It’s always about work. Listening to music and studying different craftsmanship. Basketball or just anything. Construction worker, people building houses. It’s always about that extra work and the extra hours you put in. So that’s what I took into my craft and wanted to be the best, or one of the best to play. And that’s what I did.”

Joey Linn

24,938 views • 5 months ago

Ayo Dosunmu on processing the trade away from Chicago as a native Chicagoan (everyone should journal) “Me being from Chicago I wanted to make sure I embraced all of my feelings, I didn’t want to bottle up anything. I think when you do that it’s not the right way to go about things so right away I was in a room, I had my journal down and I was just writing how I was feeling and embracing it. Then as hours go on, I was able to understand it and be like this is a great opportunity”

Ayo Dosunmu on processing the trade away from Chicago as a native Chicagoan (everyone should journal) “Me being from Chicago I wanted to make sure I embraced all of my feelings, I didn’t want to bottle up anything. I think when you do that it’s not the right way to go about things so right away I was in a room, I had my journal down and I was just writing how I was feeling and embracing it. Then as hours go on, I was able to understand it and be like this is a great opportunity”

Andrew Dukowitz

66,750 views • 7 months ago

On Steve Jobs and soul and instinct and fear and breaking through: 1. I realized I need to meet people with real talent and then all I gotta do is not get thrown out of the f*cking room. 2. I met with a bunch of tech companies and Steve was the only one that had soul. I told him I wanted to build this headphone company and Steve said: “You can do it.” 3. When I used to run companies I just woke up every day and did everything by my instinct. 4. You don't have to understand something fully to do it. I'm proof of that. I don't understand f*cking anything. But I know how to get things done. I know how to hustle. I'm willing to work harder than the next guy. 5. For a lot of people fear stops them. For the people that succeed, fear propels them forward. You need to learn how to harness fear because fear is energy. 6. Your job is to figure out a way around the gatekeeper. 7. If I see something new and great and unusual, I just can't stop. 8. If you know what you have is going to stick and if you’re passionate about it —then just break through that wall. There’s going to be a lot of resistance. But if it sticks, you win.

On Steve Jobs and soul and instinct and fear and breaking through: 1. I realized I need to meet people with real talent and then all I gotta do is not get thrown out of the fcking room. 2. I met with a bunch of tech companies and Steve was the only one that had soul. I told him I wanted to build this headphone company and Steve said: “You can do it.” 3. When I used to run companies I just woke up every day and did everything by my instinct. 4. You don't have to understand something fully to do it. I'm proof of that. I don't understand fcking anything. But I know how to get things done. I know how to hustle. I'm willing to work harder than the next guy. 5. For a lot of people fear stops them. For the people that succeed, fear propels them forward. You need to learn how to harness fear because fear is energy. 6. Your job is to figure out a way around the gatekeeper. 7. If I see something new and great and unusual, I just can't stop. 8. If you know what you have is going to stick and if you’re passionate about it —then just break through that wall. There’s going to be a lot of resistance. But if it sticks, you win.

David Senra

68,989 views • 7 months ago

Asked Kawhi Leonard about where he developed his famous work ethic from, and he gave a really insightful answer. Compared it to any job in life, whether it's being producer, basketball player, or a construction worker. "I was just being wise about it. With any craft, if it's being a producer, a rapper, or a basketball player, tennis player, they always talk about the work and the consistency. They go from all the greats in any genre or any aspect of a craftsmanship, it's always about work. Like I said, listening to music, studying different craftsmanships, from basketball and just overall anything. Somebody being a construction worker, building houses, it's always about the extra work and the extra hours you put in. That's what I took into my craft and wanted to be the best, one of the best to play, and that's what it is."

Asked Kawhi Leonard about where he developed his famous work ethic from, and he gave a really insightful answer. Compared it to any job in life, whether it's being producer, basketball player, or a construction worker. "I was just being wise about it. With any craft, if it's being a producer, a rapper, or a basketball player, tennis player, they always talk about the work and the consistency. They go from all the greats in any genre or any aspect of a craftsmanship, it's always about work. Like I said, listening to music, studying different craftsmanships, from basketball and just overall anything. Somebody being a construction worker, building houses, it's always about the extra work and the extra hours you put in. That's what I took into my craft and wanted to be the best, one of the best to play, and that's what it is."

Farbod Esnaashari

257,259 views • 5 months 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,625 views • 2 years ago