Video wird geladen...
Video konnte nicht geladen werden
Future CSS Tip! ๐ You can combine scroll-driven animations with background-clip to create gradient text reveals ๐ p { animation-name: move-bg, fade-in; animation-fill-mode: both; animation-timing-function: linear; animation-timeline: scroll(root); animation-range: 0 100vh, 40vh 100vh; } /* Multiple animations with shared timeline and different ranges ๐ */ keyframes move-bg { to... show more
180,112 Aufrufe โข vor 2 Jahren โขvia X (Twitter)
32 Kommentare
Here's that @CodePen link! ๐ค Remember you need to be in Chrome 115+ to see this working โจ Got a cool one for ya tomorrow! Now gonna go celebrate with my new wife ๐
Sign up & create wholesome anime art on Moescape AI now!
You should create an index of all of your creations, tagged, with easy searchability features. Unless you already have ;)
Kinda got something in the works for this. It would be cool if there was some kind of @CodePen API. I'd love to be able to say "Grab all pens from jh3yy with the tag for-blog" or something ๐ I have been adding the "popular" posts to my "Highlights" tab as I go but need to remember to do it. Also, got articles coming on some of these that have been shared recently! โ๏ธ
Hi jhey! This looks amazing! Would it be alright for me to try and put this implementation into a package/ library that can be easily imported and customized? I'll include credit of course.
Hey Brian ๐ค That sounds cool. How would you see that working? I do have a little thing that I've been piecing together that leans into custom properties. But, as it's wedding week I haven't had as much time as usual ๐ I'm merely here to share my thought process and ideas. If that inspires you to try something out or make something, that's awesome ๐
Iโm thankful for you man. Iโve been looking for a good explanation on how to achieve this effect. ๐ฅ
You're more than welcome Ed! ๐ I'm always open to requests as well ๐ค This is a nice effect. Think there's likely some other ways to approach it too โจ
@oleg008 I love scroll timelines but this particular animation can be achieved with masking and sticky position without needing scroll timelines!
@oleg008 Your demo isn't working in Chrome as a heads up
oh that is nice !!!
Apple jus' keep giving us scroll designs ๐
One of my favorite GIFs, hands down ๐ฏ๐
wow thatโs incredible! 2023 is surely the year of css. Cannot wait for mainstream support
@fredoiq Right?! Definitely a game changer API ๐ฏ
Does it works with current major version of Chrome, FF, or Safari? Or just an experiment mode in Canary?
Stable Chrome since 115 ๐ค
Dude, youโre killing it, amazing! ๐๐๐
Doing what I can to share my thought process ๐ Thanks Danny! ๐ค
๐๐ป You are all hereby invited to ๐ build better with โ โก๏ธ see your changes in real-time โจ๏ธ adjust numbers with โโ keys โฏ no waits/no reloads Swap codepen .io /โฏ/pen/โฏ with โ
this is sick ๐ฅ
Almost Inter Miami colors ๐๐ Thanks Michelle ๐
Please, I just wanna read the info ๐ญ. I don't wanna play a maze game.
Tell Apple Jason ๐
The irony of imitating Apple's design to work only on Chrome. Welcome to the era of neo-Internet Explorer where you need to download a specific browser to have the website display correctly.
It's an official CSSWG spec, it'll be in Safari sooner or later ๐ค
@SaveToNotion
Wicked cool
At this point we need a course on how you make these CSS based scroll animations. ๐
Hello, How would this be done with JS (react). Do you have an example?
@uxlinks @SaveToNotion
I might use this, looks awesome.
![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)
