Loading video...
Video Failed to Load
Fade elements in and out on scroll in a window with CSS? ✅ ul { scroll-padding-inline: 200px; } article { animation: highlight; animation-timeline: view(inline); } @keyframes highlight { entry 0%, exit 100% { opacity: 0; } entry 100%, exit 0% { opacity: 1; } } cc Adam Wathan
222,957 views • 2 years ago •via X (Twitter)
10 Comments
@adamwathan So cool! I was going through @bramus scroll-driven demos and had keyframe ranges but I couldn't understand how to account for the padding. Turns out scroll-padding is the solution 🤯, you are a genius!
@adamwathan @bramus Yeah, looks like that will do it 🤙 As mentioned, it was late for me last night 😅 Knew there was a cleaner way but mind was blanking haha Glad we got there in the end! I'll do some write ups on all these things soon 🔜
@adamwathan This is so much better than what I used to do: :before and :after div with a gradient from transparent to background, absolutely positioned over the edges of the carousel.
@adamwathan Now do it with Tailwind!
@adamwathan I didn't think it was possible without js. awesome work with so little code.
@adamwathan This mf!!!!!
@adamwathan Can you please drop codepen link 😩😩😩😩
@adamwathan Unfortunately not yet supported on FF / Safari just yet. But still works as progressive enhancement!
@adamwathan Stuff like this would be good for the course 💯 I think it would probably be a good idea to include the tailwind version of animations too, as tailwind is obviously pretty famous (and very handy in react/next), I think that practically speaking, a lot would benefit from it.
@adamwathan the amount of overhead to recreate everything I build in Tailwind too is not something I'm overly into if I'm honest
![CSS Tip! 🐳 You can add little details like this scale down on scroll effect with scroll-driven animations and some sticky positioning 🤙 section { animation: scale-down; animation-timeline: view(); animation-range: exit; } @keyframes scale-down { to { scale 0.8; } ] In this smaller example, you can lean into using the position to drive an animation that scales itself down as it leaves the viewport (Seen on the Apple Vision Pro site 🍏) The nice thing here is that if you don't have scroll-driven animations, the user still gets a good experience ✨ So how do you do it? There isn't much to it header { transform-origin: 50% 0%; animation: scale-down both ease-in; animation-timeline: view(); animation-range: exit; view-timeline: --header; } @keyframes scale-down { to { scale: 0.8 0.8; } } That's it. The layout makes use of position: sticky so that the element stays in the shot whilst you scroll the page. As it leaves the page, it scales down inside the 🫶 The other smol animation here is fading the overlay on the video out 😎 Real easy. You may notice the view-timeline you defined above for the 👀 header { view-timeline: --header; } You have a pseudoelement on the text content of the header that lives inside a header > section::before { background: hsl(0 0% 0% / 0.75); opacity: 1; animation: fade both linear; animation-timeline: --header; animation-range: exit-crossing 0% exit 0%; } @keyframes fade { to { opacity: 0; } } You use a slightly smaller range on this with exit-crossing to fade it out before you start the scale down animation 🤏 That's it! Thought this smaller example would be easier to grok for people 🙏 It's also covered with JavaScript if you really want it for your sites 🤙 CodePen.IO link below 👇](https://image.24vids.com/tw-1752479022674481373/ext_tw_video_thumb/1752475535978934272/pu/img/5naYIYo6vw_NbpbO.jpg)
![CSS only balance sliders 🤙 @keyframes sync { to { --value: 1; }} .slider { animation: sync; animation-timeline: --thumb; } .track { scale: var(--value) 1; } ::-webkit-slider-thumb { view-timeline: --thumb inline; } Scroll-animated input [type=range] in disguise 🥸](https://image.24vids.com/tw-1801768989804089433/ext_tw_video_thumb/1801767060696940545/pu/img/aSeYpZf1pKfiyYrD.jpg)
