Loading video...

Video Failed to Load

Go Home

Could you achieve something similar with CSS? ๐Ÿง‘โ€๐Ÿณ Scroll-driven animations && 3D perspective ๐Ÿค The trick is driving the animation with list items that are smaller in height than the images (See the guides ๐Ÿ‘‡)

166,189 views โ€ข 2 years ago โ€ขvia X (Twitter)

9 Comments

jhey โ–ฒ๐Ÿป๐ŸŽˆ's profile picture
jhey โ–ฒ๐Ÿป๐ŸŽˆ2 years ago

Not that happy with it ๐Ÿ’ฏ But the itch is scratched ๐Ÿ˜… Onto the next demo! ๐Ÿค™ Think WebGL gets you the smoothest result. Jus need to be mindful of readability for users etc.

ห—หห‹ rogie หŽหŠห—'s profile picture
ห—หห‹ rogie หŽหŠห—2 years ago

This is so hot

jhey โ–ฒ๐Ÿป๐ŸŽˆ's profile picture
jhey โ–ฒ๐Ÿป๐ŸŽˆ2 years ago

The WebGL is undoubtedly smoother ๐Ÿ’ฏ Would be interested to see how it's been applied though. If it's all canvas then you lose the readability ๐Ÿค” CSS has it's limits for sure with some of these. GSAP ScrollTrigger likely gets a not bad result.

Dark Code's profile picture
Dark Code2 years ago

Sheesh, that looks so good!

Mable Lisabeth's profile picture
Mable Lisabeth2 years ago

Sheesh, that lookis sg good!

allthings.framer's profile picture
allthings.framer2 years ago

Waiting for the awwwards people to come and start hating on this because you are stealing a design.

Max Barvian's profile picture
Max Barvian2 years ago

So cool! How did you break the images out of the list items? I did the same thing with this slider but hit some bugs when the list item was close to 100% the width of the container (not pictured)

Jan's profile picture
Jan2 years ago

wow, looks really good

Hams's profile picture
Hams2 years ago

X tabs looks like a p0rn website tabs ๐Ÿคง๐Ÿคฆโ€โ™‚๏ธ So .... Great & Amazing work ๐Ÿ™Œ

Related Videos

CSS Tip! โœจ You can create these parallax effects and image cross-fades with scroll-driven animations ๐Ÿค™ img { animation: fade; animation-timeline: view(); mix-blend-mode: plus-lighter } img:last-of-type { animation-direction: reverse; } @โ€‹keyframes fade { to { opacity: 0; }} This one's fun! ๐Ÿ˜ The trick with the cross-fading image is to make use of one animation that runs at the same time on two images inside a container. You use the same animation, animation-timeline, and animation-range. But, you use animation-direction: reverse on one of the images so they go in the opposite direction ๐Ÿซถ The use of mix-blend-mode: plus-lighter; produces a better cross-fade result ๐Ÿ’ฏ A viewTimeline (view()) works because you know that both images are the same height. The range you can use is img { animation-timeline: view(); animation-range: cover 45% cover 55%; } That means when the image has covered 45% of the scrollport (In this case, the window), start the animation. And finish when it has covered 55% ๐ŸŽฌ How about the slight parallax? This is a trick with calc(). You know the top of the small image and the big image line up. And you can do this by absolutely placing the caption outside of the small image. The trick is to translate the small image by a distance so it lines up with the bottom of the big image. You can do that like this :root { --catch-up: calc( var(--big-height) - var(--small-height) ); } @โ€‹keyframes move { to { translate: 0 var(--catch-up); }} Then drive that animation with a scroll-driven animation using the container of both images as the driver ๐Ÿค™ /* section contains both images */ section { view-timeline: --container; } .img-fader { animation: catch-up both linear; animation-timeline: --container; animation-range: 50vh calc(100vh + (var(--big-height) * 0.25)); } That's it! Scroll-driven image cross-fading and parallax effects without any JavaScript. This demo will work in all browsers as there is some JavaScript in place where the API isn't supported ๐Ÿค™ To do that, it uses GSAP ScrollTrigger ๐Ÿ† As always, any questions, requests, etc. hit me up! ๐Ÿค™ CodePen.IO link below ๐Ÿ‘‡

jhey ส•โ€ขแดฅโ€ขส”

242,016 views โ€ข 2 years ago

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 views โ€ข 2 years ago