Video wird geladen...
Video konnte nicht geladen werden
Switching word combos on scroll with CSS 🖱️ main { animation: switch both steps(3); animation-timeline: view(); } @keyframes switch { to { --i: 3; }} .words__track { translate: 0 calc(var(--i) * -100%); } Result of a DM request 👇
92,943 Aufrufe • vor 1 Jahr •via X (Twitter)
10 Kommentare

jhey ▲🐻🎈vor 1 Jahr
Wasn't going to share this one as it was quickly thrown together 😬 May be useful to some though 🤙 Haven't put together a mobile view where could imagine everything would stack and you'd lose the animation. Nor does this fallback where no support 🥲

pavi2410vor 1 Jahr
What's the DOM structure like?

Andrej Maznevskivor 1 Jahr
So this is what you've been cooking 🧑🍳

jhey ▲🐻🎈vor 1 Jahr
Not this haha 😂 This was like a 20 minute prototype for someone 🤙

Abdulfettahvor 1 Jahr
When this gonna be supported on safari

Ivanchisvor 1 Jahr
👋👋👋

Soyavor 1 Jahr
thank you! i’ll definitely implement this soon

huang deshiouvor 1 Jahr
This looks amazing! Can I ask for the code?

LcsGa 🅰️vor 1 Jahr
Nice effect! To work properly, each part has to be of the same height, right?

ROLLAvor 1 Jahr
You need to adjust the alignment of the text. It’s a little wonky
