Loading video...
Video Failed to Load
Future CSS Tip! ๐ฎ You can create this scrolling image pop-out effect with CSS scroll-driven animations and zero JS! ๐ฅ .pop { view-timeline-name: --pop; } img { animation: slide both; animation-timeline: --pop; animation-range: entry 100% cover 50%; } .skateboarder { --x: 0; --y: -45%; } @ keyframes slide {... show more
635,095 views โข 3 years ago โขvia X (Twitter)
11 Comments
jhey โฒ๐ป๐3 years ago
Here's that @CodePen link! ๐ You'll need to be in Chrome to see it working as expected ๐ค Many little cool tricks in this one ๐ค As long as I've used it, scoped custom properties in animation keyframes always make me happy ๐
jhey โฒ๐ป๐3 years ago
Not using Chrome? Want it in all browsers? Use a little JavaScript and built it with GSAP โจ Here's one that should work everywhere using ScrollTrigger ๐
Simon Vrachliotis3 years ago
Parallax is back baby!
jhey โฒ๐ป๐3 years ago
It never left! ๐๐
Oฤuz3 years ago
๐
jhey โฒ๐ป๐3 years ago
๐๐๐
iDev3 years ago
You always find a way to awe me๐๐
jhey โฒ๐ป๐3 years ago
Try my best! ๐
Jon Snow3 years ago
Damn thats sick af!
Robin3 years ago
Slick! Always putting great content!
jhey โฒ๐ป๐3 years ago
@rmkluis Too kind Robin! ๐
![CSS Tip! โจ You can create icon sprite animations using the steps() animation-timing function ๐ค You could use this to create little icon button animations, etc. ๐ But how do you do it? Like this ๐ button img { object-fit: cover; object-position: 0 0; } The image is a sprite strip of the frames in the animation. To animate the frames, you do something like this: [aria-pressed=true] img { animation: play 0.5s steps(20) forwards; } @ keyframes play { to { object-position: 100% 0; } } We are toggling aria-pressed in our scripts to show a pressed state and we can then fire the animation to play our sprite ๐ Check out the video that breaks things down a little bit CodePen.IO link blow! ๐](https://image.24vids.com/tw-1694442289047703873/ext_tw_video_thumb/1694440593613557760/pu/img/OB1gtiLZhnylcC9e.jpg)
![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! ๐](https://image.24vids.com/tw-1738039148672426164/ext_tw_video_thumb/1738032359302156288/pu/img/s8BufTPl8FRWOouG.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)
![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)
