Recreating Vercel's Smooth Navigation Animation With CSS Only

Подписаться 20 тыс.

Просмотров 10 тыс.

50% 1

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!
Make sure to check out the live playground and code via the link below too!
✨ Become a PRO today via www.frontend.fyi/pro
🔗 Code, live playground: www.frontend.fyi/v/recreating...
#frontend #css #html #animations

Наука

Опубликовано:

20 дек 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 33

@migueldf10 7 месяцев назад

Vercel's UI animations are always a delight. Awesome pick and great video! Thank you!

@mycode0 7 месяцев назад

That is a world class content, thank you !

@TheSteelzeh 7 месяцев назад

Really good video! No fluff, just straight to the point. Was enjoyable to watch

@frontendfyi 7 месяцев назад

Thank you so much, appreciate it!

@szymon7932 7 месяцев назад

cool, but how is that plain CSS? You even installed a lib to do that

@frontendfyi 7 месяцев назад

Sorry for the confusion, I meant without any animation library but just with css 😁 (and indeed a scroll listener in js - which with css scroll driven animations can be even done without, but that’s not fully cross browser compatible yet!)

@swolebastard531 7 месяцев назад

I agree this was a little clickbaity haha. Would like to see you recreate this with only CSS, even though it's not fully cross browser compatible.

@frontendfyi 7 месяцев назад

@@swolebastard531Well the only thing that has to change is the scroll driving animations. Take a look at this video/article, it's a fairly similar approach: www.frontend.fyi/v/css-scroll-driven-animations Would love to see how you do it ;)

@joshuastories 7 месяцев назад

Tailwind is just shorthand css. Utility classes map almost 1 to 1 with CSS. I don’t think it was clickbait. If you know CSS, you know tailwind

@swolebastard531 7 месяцев назад

@@frontendfyi Nice, will look into it!

@didemkucukkaraaslan7373 7 месяцев назад

Thanks for this vid!

@elgeneee 7 месяцев назад

so clean! cant believe i didnt notice this on their dashboard 🙄

@xsls0n 7 месяцев назад

Cool video as always & happy holidays Jeroen 🎉

@frontendfyi 7 месяцев назад

Thank you! Happy holidays to you too 😁

@iPankBMW 7 месяцев назад

Finally some1 showed me how to create picel based animation based on scroll - this gives us native mobile app feeling :)

@maratiot 7 месяцев назад

nice and neat css and js

@hiyankey 7 месяцев назад

Happy new year Jeroen

@frontendfyi 7 месяцев назад

Thank you Emmanuel! Wishing you the best for the coming year too!

@mckaymower 7 месяцев назад

how can you do this with framer motion? :) can you have another tutorial with framer?

@frontendfyi 7 месяцев назад

You can, but if there’s no reason to make it with framer I always opt for css only. It’s simpler, quicker, more performant.

@nested9301 7 месяцев назад

the problem with software development is not how had to do it , u will do it and it will work, but is it the right approch ?

@frontendfyi 7 месяцев назад

Contrary to lots of hype channels I try to teach it in a way it’s done in the real world. This is the way you can use it in production 🫡 Besides that; there’s no single solution to anything it all depends and multiple solutions can be right. Thanks for mentioning it though!

@gauravmali6250 7 месяцев назад

I love to buy your course but when it is coming ?

@frontendfyi 7 месяцев назад

The first modules will release in a few weeks! I'm working on the final lessons and details. As soon as that happens the price will also increase shortly after (but I will send out an email to the newsletter before that happens). Hoping to meet you in Discord!