Loading video...

Video Failed to Load

Go Home

CSS position: sticky, scroll-snap + progressively enhanced scroll animation 📜 li { animation: bright; animation-range: calc(50% - 1lh) calc(50% + 1lh); animation-timeline: view(); scroll-snap-align: center; } @​keyframes bright { 50% { opacity: 1; }}

366,626 views • 1 year ago •via X (Twitter)

10 Comments

jhey ▲🐻🎈's profile picture
jhey ▲🐻🎈1 year ago

original concept here on the "forge & form" site 👏 scroll to the bottom 👇 p.s hadn't seen this one on here so couldn't quote it

jhey ▲🐻🎈's profile picture
jhey ▲🐻🎈1 year ago

here's the @CodePen for this one 🤙 wanted to get that colorful scrollbar experiment in place first before posting it 🙏 now we hop on a plane ✈️

Elliott Johnston's profile picture
Elliott Johnston1 year ago

Here's a similar example I coded up

fangjun's profile picture
fangjun1 year ago

can you share the code example? thanks.

Lewis's profile picture
Lewis1 year ago

This would be cool as a custom select

jhey ▲🐻🎈's profile picture
jhey ▲🐻🎈1 year ago

now that's an idea! 💡

jhey ▲🐻🎈's profile picture
jhey ▲🐻🎈1 year ago

like seeing these and want to learn more about how to build awesome UIs for the web? Check out my newsletter, "The Craft of UI" quite the backlog of issues coming 🤙 👉

Tyrone C.'s profile picture
Tyrone C.1 year ago

That is so sick 👀

Ji @ crypto-cafe (YT)'s profile picture
Ji @ crypto-cafe (YT)1 year ago

can we get an additional level of items? like a 2 tiered mindmap in scrollable style.

jhey ▲🐻🎈's profile picture
jhey ▲🐻🎈1 year ago

that would be neat, a two-tiered set would work as well by nesting the "stickiness" would need some sentences to build out with that structure 🤔

Related Videos

Future CSS Tip! 🍏 You can create this Apple-style photo scroller by combining CSS scroll-driven animations and CSS scroll-snap 😍 Peep those changing captions 👀 No JS! img { animation: highlight both linear; animation-timeline: view(inline); 👈 Horizontal animation-range: cover 0% cover 50%; 👈 Finish } @ keyframes highlight { 50% { translate: 0 0; scale: var(--starting-scale); 👈 props opacity: var(--starting-opacity); 👈 } 100% { translate: 0 0; scale: 1; opacity: 1; } } Without the animation support, you get a standard unordered list containing some s 🤙 How do we swap the captions though? The "trick" is to use position: absolute on the figcaption and animate their opacity based on the ViewTimeline of their parent list item 😎 figcaption { animation: show both linear; animation-timeline: --list-item; } @ keyframes show { 0%, 45%, 55%, 100% { opacity: 0; } 50% { opacity: 1; } } li { view-timeline-name: --list-item; view-timeline-axis: inline; 👈 important! } The parent of the scroll track uses position: relative so all the captions sit in the middle even though they are in the right place for the markup 🙌 The last bit is the scroll-snap 🤙 Not much to it at all. Wrap the list and make it scrollable. Then add scroll-snap-type .wrapper { scroll-snap-type: x mandatory; overflow-x: scroll; } Then make sure each list item has scroll-snap-align set on it li { scroll-snap-align: center; } That's it! Pretty cool demo to put together and see how to do this stuff with these APIs 🤓 A lot of cool little tricks to pick up for writing your CSS! ⭐️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

234,561 views • 2 years ago