frontend.fyi

Recreating Vercel's Smooth Navigation Animation With CSS Only

In this video we'll be recreating an animation that shines in its simplicity.

🧑‍💻 🎥
... Almost ready!

This week I noticed Vercel added a new scroll animation to their deployments page. My mind immediately thought this was such a nice animation that I wanted to recreate with Framer Motion. Then I thought; Why Framer Motion?! This is such a simple animation, we can do this with plain CSS!

That is exactly what we will be exploring in todays video. We are gonna recreate this smooth scroll animation with just a few lines of CSS and a single JavaScript scroll listener. Let’s dive in!

Ready to learn more?

I think this video might be a good fit for you too!