Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

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 Aufrufe • vor 1 Jahr •via X (Twitter)

Kunst Bildung Wissenschaft & Technologie #css

Anya Rossi• Live Now

Private livecam show

8 Kommentare

Profilbild von Carl 💥 Creative Coding Club

Carl 💥 Creative Coding Clubvor 1 Jahr

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

Profilbild von Carl 💥 Creative Coding Club

Carl 💥 Creative Coding Clubvor 1 Jahr

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

Profilbild von Sam Sen | Web & Digital Design

Sam Sen | Web & Digital Designvor 1 Jahr

@jhey Looks awesome!

Profilbild von crapthings

crapthingsvor 1 Jahr

@jhey cool

Profilbild von Dan Florian

Dan Florianvor 1 Jahr

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

Profilbild von Armando J. Perez-Carreno

Armando J. Perez-Carrenovor 1 Jahr

@jhey Love the demo

Profilbild von Carl 💥 Creative Coding Club

Carl 💥 Creative Coding Clubvor 1 Jahr

@jhey Thanks!!!

Profilbild von Andy

Andyvor 1 Jahr

@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.

Ähnliche Videos

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

49,603 Aufrufe • vor 1 Jahr

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,002 Aufrufe • vor 2 Monaten

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. 👇

Alex Socoloff

71,411 Aufrufe • vor 3 Monaten

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

262,871 Aufrufe • vor 7 Tagen

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

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

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

🚨 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

74,579 Aufrufe • vor 11 Monaten

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

120,525 Aufrufe • vor 4 Monaten

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,888 Aufrufe • vor 3 Monaten

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

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

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,136 Aufrufe • vor 3 Monaten

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

Start your next project with a giant scroll of paper I learned this from my friend Rob Kalin, founder of Etsy. When he starts a project, he gets out a giant piece of butcher paper — like three feet by sixty feet. When you start the project, you put your first ideas down in the top-left corner. As you keep working, the scroll becomes an organic timeline of your thinking. I started a scroll for Metalabel back in November 2021 and finished it this February. Three-plus years of ideas, from Metalabel to A-Corps, on paper as they happened. Scroll #2 is already almost done. A great way to see exactly how you and your ideas progressed over the course of a project and to open yourself up to unexpected directions Here's a timelapse of three-plus years of thinking (music by Ana Roxanne)

Start your next project with a giant scroll of paper I learned this from my friend Rob Kalin, founder of Etsy. When he starts a project, he gets out a giant piece of butcher paper — like three feet by sixty feet. When you start the project, you put your first ideas down in the top-left corner. As you keep working, the scroll becomes an organic timeline of your thinking. I started a scroll for Metalabel back in November 2021 and finished it this February. Three-plus years of ideas, from Metalabel to A-Corps, on paper as they happened. Scroll #2 is already almost done. A great way to see exactly how you and your ideas progressed over the course of a project and to open yourself up to unexpected directions Here's a timelapse of three-plus years of thinking (music by Ana Roxanne)

Yancey Strickler

245,586 Aufrufe • vor 11 Monaten

📣 ANNOUNCEMENT 📣 After sweating dozens of shirts, I'm finally proud to announce it. Alohi is available for everyone! 🚀 If you are looking to create tweets out of thin air, this is for you. And here's how ✨ (link to page down below) Alohi is the startup I always wanted to create but didn't have the skills to make it real—or, better yet, the courage. 👉 This March, I learned how to code a SaaS. 👉 In May, 15 people joined the beta. They helped me improve the app, and 5 of them also became customers. 👉 Now, before this quarter ends, my newborn is live! There are so many things to improve. The to-do list feels like a grocery shopping receipt. Alohi doesn't have yet: - a logo - a settings page - nor a proper login page But I don't care. I'm too excited not to share it with you 🤩 So, if you have a newsletter, go check the magic out 👇

Mattia Righetti 👨‍🚀

25,817 Aufrufe • vor 2 Jahren

F:I want to be by your side in every upcoming moment and want to tell you I always worry about you B:I say this from the bottom of my heart I want you to know no matter what happens I will encourage you 🎶F to B May you have a safe journey Don't be sad alone #FreenBecky #ฟรีนเบค

F:I want to be by your side in every upcoming moment and want to tell you I always worry about you B:I say this from the bottom of my heart I want you to know no matter what happens I will encourage you 🎶F to B May you have a safe journey Don't be sad alone #FreenBecky #ฟรีนเบค

Love Dino Ji 공룡 사랑~

72,639 Aufrufe • vor 2 Jahren

This story about how Zuck pushed Aditya Agarwal to his extreme & made him build the search engine in the early days is awesome! Aditya was one of the early engg in Facebook & in week 2 of joining he was still figuring out what to do,none were giving any directions. Mark walked upto him & asked him to build a search engine -just him he didn't mean a team. Because people want to search for others through the search engine in Facebook & this is crucial. Aditya was pretty skeptical about himself as he didn't know how to build one. He suggested hiring someone from Google or Yahoo to build this out, Mark was like: "Dude if I can build Facebook you can build a damn search engine" And he actually ended up doing it! Still now he shares this lesson from this defining moment of his life to every founders - Anything could be done if you'd put your mind into it.

This story about how Zuck pushed Aditya Agarwal to his extreme & made him build the search engine in the early days is awesome! Aditya was one of the early engg in Facebook & in week 2 of joining he was still figuring out what to do,none were giving any directions. Mark walked upto him & asked him to build a search engine -just him he didn't mean a team. Because people want to search for others through the search engine in Facebook & this is crucial. Aditya was pretty skeptical about himself as he didn't know how to build one. He suggested hiring someone from Google or Yahoo to build this out, Mark was like: "Dude if I can build Facebook you can build a damn search engine" And he actually ended up doing it! Still now he shares this lesson from this defining moment of his life to every founders - Anything could be done if you'd put your mind into it.

Aish

630,651 Aufrufe • vor 1 Jahr