Recreating Vercel's Smooth Navigation Animation With CSS Only
Вставка
- Опубліковано 20 гру 2023
- 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 - Наука та технологія
Vercel's UI animations are always a delight. Awesome pick and great video! Thank you!
Really good video! No fluff, just straight to the point. Was enjoyable to watch
Thank you so much, appreciate it!
cool, but how is that plain CSS? You even installed a lib to do that
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!)
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.
@@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 ;)
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
@@frontendfyi Nice, will look into it!
so clean! cant believe i didnt notice this on their dashboard 🙄
That is a world class content, thank you !
Thanks for this vid!
Cool video as always & happy holidays Jeroen 🎉
Thank you! Happy holidays to you too 😁
Finally some1 showed me how to create picel based animation based on scroll - this gives us native mobile app feeling :)
nice and neat css and js
Happy new year Jeroen
Thank you Emmanuel! Wishing you the best for the coming year too!
how can you do this with framer motion? :) can you have another tutorial with framer?
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.
I love to buy your course but when it is coming ?
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!
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 ?
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!
Great tuts, but this is still framer motion without using framer motion 😅
Framermotion has the same hook, it's called useScroll. It's the same, isn't it ?
Yes, 100% the same! You can use that one as well.
It's not CSS only though.
CSS only? 😂
not css only solution i guess.
At least no JavaScript animation library I meant. Sorry for that 🫡