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.

Use the scroll-padding CSS property when using a scroll fade so your items don't get stuck in the fade region. Bonus: It also makes clicking through each option way more convenient!

balint

2,842 subscribers

19,996 views • 4 months ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

💡 CSS Tip! Get the scroll progress of the page as a CSS variable using a few lines of code ✅ Powered by Scroll driven animations ✅ Defined at the root level ✅ Typed using @property ✅ You can easily use it within any formula CodePen.IO demo in the reply 👇

💡 CSS Tip! Get the scroll progress of the page as a CSS variable using a few lines of code ✅ Powered by Scroll driven animations ✅ Defined at the root level ✅ Typed using @property ✅ You can easily use it within any formula CodePen.IO demo in the reply 👇

CSS by T. Afif

35,659 views • 2 years ago

when you add fade out for the scrollable container, make sure it won't overlap your scroll bar

when you add fade out for the scrollable container, make sure it won't overlap your scroll bar

dmytro

54,436 views • 10 months ago

How I built with Lovable 👇 1. Start with midnight blue + soft sand feels cinematic instantly 2. Tell Lovable to make it a single scroll page with scene transitions 3. Add a lone figure walking through a dreamy 3D landscape 4. Each scroll section reveals a new sleep science fact 5. Use CSS fluid shapes for organic background movement 6. Wide spacing + slow fade-ins let the content breathe 7. Deploy in one click no code, no agency, no $10k budget

How I built with Lovable 👇 1. Start with midnight blue + soft sand feels cinematic instantly 2. Tell Lovable to make it a single scroll page with scene transitions 3. Add a lone figure walking through a dreamy 3D landscape 4. Each scroll section reveals a new sleep science fact 5. Use CSS fluid shapes for organic background movement 6. Wide spacing + slow fade-ins let the content breathe 7. Deploy in one click no code, no agency, no $10k budget

FHILY👑

98,045 views • 5 months ago

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 🤙

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,951 views • 1 year ago

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);

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

78,350 views • 1 year ago

When you put your iPhone on the charger, Bauhaus Clock automatically appears with a soft, gentle fade. It’s a subtle detail, but it makes the whole moment feel more elegant and intentional. The video can’t do it justice. It looks stunning on the real device.

When you put your iPhone on the charger, Bauhaus Clock automatically appears with a soft, gentle fade. It’s a subtle detail, but it makes the whole moment feel more elegant and intentional. The video can’t do it justice. It looks stunning on the real device.

Atilla

99,441 views • 10 months ago

We had this long-standing papercut at Linear where the menu items overflow their outer container. It was hard to fix, or so I thought, because the structure is pretty complicated given all the design details, so a simple overflow: hidden wouldn’t work as it would break the animation. But today I had an epiphany that we could just use a simple CSS mask and fade the items out. Here’s a before & after with a zoom on the problem, look at the left edge:

We had this long-standing papercut at Linear where the menu items overflow their outer container. It was hard to fix, or so I thought, because the structure is pretty complicated given all the design details, so a simple overflow: hidden wouldn’t work as it would break the animation. But today I had an epiphany that we could just use a simple CSS mask and fade the items out. Here’s a before & after with a zoom on the problem, look at the left edge:

Emil Kowalski

122,455 views • 2 months ago

Is your team's best knowledge trapped in Slack? Introducing the Slack Connector on Manus. It turns Slack conversations into searchable, actionable knowledge, so your insights don’t get lost in the scroll.

Is your team's best knowledge trapped in Slack? Introducing the Slack Connector on Manus. It turns Slack conversations into searchable, actionable knowledge, so your insights don’t get lost in the scroll.

Manus

122,339 views • 9 months ago

you can create a CSS only carousel with CSS `𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚗𝚊𝚙` .𝚜𝚌𝚛𝚘𝚕𝚕𝚎𝚛 { 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠-𝚡: 𝚊𝚞𝚝𝚘; 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚗𝚊𝚙-𝚝𝚢𝚙𝚎: 𝚡 𝚖𝚊𝚗𝚍𝚊𝚝𝚘𝚛𝚢; 𝚜𝚌𝚛𝚘𝚕𝚕-𝚙𝚊𝚍𝚍𝚒𝚗𝚐-𝚒𝚗𝚕𝚒𝚗𝚎: 𝟷.𝟻𝚛𝚎𝚖; /* 𝚖𝚊𝚝𝚌𝚑𝚎𝚜 𝚢𝚘𝚞𝚛 𝚜𝚌𝚛𝚘𝚕𝚕-𝚙𝚕/𝚙𝚛 */ } .𝚌𝚊𝚛𝚍 { 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚗𝚊𝚙-𝚊𝚕𝚒𝚐𝚗: 𝚌𝚎𝚗𝚝𝚎𝚛; 𝚏𝚕𝚎𝚡-𝚜𝚑𝚛𝚒𝚗𝚔: 𝟶; } When you scroll, it snaps exactly in the center of the card Super fun to use, easy to implement, no javascript required

you can create a CSS only carousel with CSS `𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚗𝚊𝚙` .𝚜𝚌𝚛𝚘𝚕𝚕𝚎𝚛 { 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠-𝚡: 𝚊𝚞𝚝𝚘; 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚗𝚊𝚙-𝚝𝚢𝚙𝚎: 𝚡 𝚖𝚊𝚗𝚍𝚊𝚝𝚘𝚛𝚢; 𝚜𝚌𝚛𝚘𝚕𝚕-𝚙𝚊𝚍𝚍𝚒𝚗𝚐-𝚒𝚗𝚕𝚒𝚗𝚎: 𝟷.𝟻𝚛𝚎𝚖; /* 𝚖𝚊𝚝𝚌𝚑𝚎𝚜 𝚢𝚘𝚞𝚛 𝚜𝚌𝚛𝚘𝚕𝚕-𝚙𝚕/𝚙𝚛 */ } .𝚌𝚊𝚛𝚍 { 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚗𝚊𝚙-𝚊𝚕𝚒𝚐𝚗: 𝚌𝚎𝚗𝚝𝚎𝚛; 𝚏𝚕𝚎𝚡-𝚜𝚑𝚛𝚒𝚗𝚔: 𝟶; } When you scroll, it snaps exactly in the center of the card Super fun to use, easy to implement, no javascript required

Manu Arora

56,610 views • 6 months ago

Complex UI: New web APIs in disguise 🥸 These balance sliders are basic input [type=range] with labels and some extra elements The magic comes from using a scroll animation on the range thumb and using it to drive a custom property that updates styles on the visuals ✨

Complex UI: New web APIs in disguise 🥸 These balance sliders are basic input [type=range] with labels and some extra elements The magic comes from using a scroll animation on the range thumb and using it to drive a custom property that updates styles on the visuals ✨

jhey ʕ•ᴥ•ʔ

113,111 views • 2 years ago

Time is still your friend! Smash a mission a minute. Complete all 45 starred missions. Qualify for airdrop. Do more missions. Go higher. * Top 10 = $10k slice each * Top 50 = $5k slice each * Top 1000 = $1k slice each * Everyone else to share in $1m+ $WLTH airdrop Don't fade the Free Fund. Start here 👇

Time is still your friend! Smash a mission a minute. Complete all 45 starred missions. Qualify for airdrop. Do more missions. Go higher. * Top 10 = $10k slice each * Top 50 = $5k slice each * Top 1000 = $1k slice each * Everyone else to share in $1m+ $WLTH airdrop Don't fade the Free Fund. Start here 👇

WLTH

29,955 views • 2 years ago

✨🇨🇳Huawei’s Zunjie S800 has a smart “wave-to-close door” function. Wave your hand after getting in, and the door closes automatically. Super convenient, especially when carrying items. It also adds luxury and high-tech style to your drive.

✨🇨🇳Huawei’s Zunjie S800 has a smart “wave-to-close door” function. Wave your hand after getting in, and the door closes automatically. Super convenient, especially when carrying items. It also adds luxury and high-tech style to your drive.

🇨🇳XuZhenqing徐祯卿

39,314 views • 9 months ago

While it’s not a chart, I’ve also just realised that when you scroll through the story on your phone, the BBC have placed the only man in the list of ‘100 influential and inspiring women’ at the No2 spot. You see his story a full 23 places above that of Gisele Pelicot.

While it’s not a chart, I’ve also just realised that when you scroll through the story on your phone, the BBC have placed the only man in the list of ‘100 influential and inspiring women’ at the No2 spot. You see his story a full 23 places above that of Gisele Pelicot.

Jill Foster

18,154 views • 1 year ago

So many people live life full of stress and often times a scoop of ice cream is the solution. Use Grok Imagine to transform your old photos into the best memories of your life. Like… why fade your photos into distant memories when you can bring it back to life today?

So many people live life full of stress and often times a scoop of ice cream is the solution. Use Grok Imagine to transform your old photos into the best memories of your life. Like… why fade your photos into distant memories when you can bring it back to life today?

Teslaconomics

22,551 views • 6 months ago

🤩 I just learned a super cool trick! Do you know how sometimes you want to record while you scroll on a website, like for a demo or something... But by using the mouse to scroll it turns out to be kinda janky and it doesn't look very good? No? Just me? 🤭 Well, I found out that if you paste this code in the console of your browser: ` setInterval(() => window.scrollBy(0, 4), 16); ` You can make the browser automatically scroll for you! And it looks super cool in the recording! 😎

🤩 I just learned a super cool trick! Do you know how sometimes you want to record while you scroll on a website, like for a demo or something... But by using the mouse to scroll it turns out to be kinda janky and it doesn't look very good? No? Just me? 🤭 Well, I found out that if you paste this code in the console of your browser: ` setInterval(() => window.scrollBy(0, 4), 16); ` You can make the browser automatically scroll for you! And it looks super cool in the recording! 😎

Florin Pop 👨🏻‍💻

29,839 views • 1 year ago

New RoValra feature most likely coming in the next update. This will allow you to select the bonus item you want when buying 2K or more robux I might have cooked a little too hard with this Also missing a lot of bonus items in the video

New RoValra feature most likely coming in the next update. This will allow you to select the bonus item you want when buying 2K or more robux I might have cooked a little too hard with this Also missing a lot of bonus items in the video

Valra

38,661 views • 4 months ago

My favorite Excel Copilot prompt is "What is this workbook about?" I get workbooks shared with me all the time. When I don't have a lot of context on one, this is often the easiest way to get oriented. Way faster than clicking through every tab.

My favorite Excel Copilot prompt is "What is this workbook about?" I get workbooks shared with me all the time. When I don't have a lot of context on one, this is often the easiest way to get oriented. Way faster than clicking through every tab.

Brian Jones

11,663 views • 3 months ago