Loading video...
Video Failed to Load
Future CSS Tip! ๐ฎ Use scroll-driven animations to create those cool Apple-style text reveals ๐ฅ No JavaScript required ๐ Responsive too! ๐ .sentence { animation: highlight; animation-timeline: view(); animation-range: cover 40% cover 75%; } CodePen.IO link below! ๐
348,077 views โข 3 years ago โขvia X (Twitter)
10 Comments
jhey โฒ๐ป๐3 years ago
Here's that @CodePen link! ๐ Remember, you'll need to be in Chrome Canary to see this in action. But, how exciting?! ๐คฏ
Shaun Levett3 years ago
@CodePen This is highly erotic
jhey โฒ๐ป๐3 years ago
@CodePen Hahaha ๐๐
altino3 years ago
@CodePen that means it uses main thread or not ? Im confused ...
Ali3 years ago
@CodePen @maryam_davoudi
Julien Van Beveren3 years ago
@CodePen crazy that this works with css only! maybe scroll highjacking might be considered ok now
jhey โฒ๐ป๐3 years ago
@CodePen Yeah, it's gonna make things pretty interesting ๐ค
Lucas Walder3 years ago
@CodePen Olha isso @evvvrado
Santiago3 years ago
@CodePen @SaveToNotion #thread #css
Fradviam3 years ago
@CodePen ๐ณ๐ณ
![CSS Tip! ๐ฅ You can create these trending expanding scroll indicators with scroll-driven animations and flex ๐ค .indicator { animation: grow; animation-range: contain calc(50% - var(--size)...; animation-timeline: var(--card); } @โkeyframes grow { 50% { flex: 3; }} What's the trick? Put the indicators in a container using flex layout and set a width larger than the number of indicators ๐ .indicators { aspect-ratio: 7 / 1; display: flex; } Importantly, set no gap ๐ค To mimic the gap set a transparent border on each indicator and set the background using padding-box .indicator { background: linear-gradient(#โfff, #โfff) padding-box; border-radius: 50px; border: 4px solid transparent; } Now for the animation. You want to create a view-timeline for each card that moves across ๐ค li:nth-of-type(1) { view-timeline: --one inline; } li:nth-of-type(2) { view-timeline: --two inline; } Make sure they use the inline axis too! The trick is hoisting these view-timeline so the indicators can use them with timeline-scope ๐ .track { timeline-scope: --one, --two, ...; } All that's left is for you to create the animation piece using some calc with the card size โก๏ธ .indicator { --size: calc(var(--card-width) * 0.9); animation: grow both linear; animation-range: contain calc(50% - var(--size)) contain calc(50% + var(--size)); } .indicator:nth-of-type(1) { animation-timeline: --one; } .indicator:nth-of-type(2) { animation-timeline: --two; } @โkeyframes grow { 50% { flex: 3; }} And there you have it, responsive scroll indicators using CSS scroll-driven animations ๐ Sprinkle a little JavaScript to make them clickable and scroll the the right card โจ const shift = (event) => { if (eventโ.target.tagName === "BUTTON") { const index = [...event.target.parentNode.children].indexOf(eventโ.target); const item = document.querySelector(`li:nth-of-type(${index + 1})`); item.scrollIntoView({ behavior: "smooth", inline: "center" }); } }; As always, any questions or suggestions, let me know. I've put a JavaScript fallback in to use GSAP in browsers that don't have scroll-driven animations ๐ซถ CodePen.IO link below! ๐](https://image.24vids.com/tw-1743737760773705824/ext_tw_video_thumb/1743734045748641792/pu/img/nFQ1z9S-iN4AY8SN.jpg)
![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)
