Loading video...

Video Failed to Load

Go Home

CSS scroll to decrypt 🤖 The trick is translating text on scroll within a clipped element ✨ (Watch 🎞️) .char { animation: t both steps(10); animation-timeline: --heading; animation-range: contain calc(var(--i) * 1%)...; } @​keyframes t { to { translate: 0 calc(100% - 1lh);}}

264,492 views • 1 year ago •via X (Twitter)

9 Comments

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

Here's the @CodePen link 🤙

Wes Bos's profile picture
Wes Bos1 year ago

Oh man this is awesome! I’ve always loved that effect

omar's profile picture
omar1 year ago

I did similar effect before, but wow this looks way better hooolyyy 👏🫡

George's profile picture
George1 year ago

I love what CSS can do now. Vanilla is the way to go 👏🏻

dotenvx's profile picture
dotenvx1 year ago

this is dope. might steal.

aidrian's profile picture
aidrian1 year ago

Looks amazing, but it doesn't work in firefox 🥲

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

It won't. Firefox doesn't have CSS scroll animation yet. Neither does Safari 🥲 Would have to polyfill with something like GSAP ScrollTrigger

TheWatcher's profile picture
TheWatcher1 year ago

That is so brutal 💪🏼

TchikTchak.Crypto |.Ofweb3's profile picture
TchikTchak.Crypto |.Ofweb31 year ago

👏🔥😎

Related Videos