Animate nav on scroll - CSS-only & easy to customize

[@gReed16384]

Well, after a year of watching your videos I learned that its not "Friend and Friends" but "Frontend Friends" ... :D

[@danielcrompton7818]

Every day is a learning day!

[@melekRebai]

I thought the same until a couple of videos ago where someone mentioned this

[@goodshiro10]

So people are starting to realise...

[@goranspasic4977]

WOW LOL... thank you for clarification xD I thought same

[@martinmarru]

Wait what? I thought the same for almost 2years :D

[@Foo678]

With animation-timeline we can also make an scroll to top button, that feature is amazing

[@vac1e]

I'm curious, how you do that? It was like 6 months now, since I haveanything css related work to do and I didn't have time to keep up with this feature.

[@ricksanchez-c-137]

Bro we livin in simulation😂 I tought about this yesterday for my project and now you upload it. Few days earlier same thing happens i think of something my brother Kevin uploads it

[@02jaysenghani]

+1

[@FXY_]

happened to me as well 😂

[@riccardorighetti5632]

I probably understood 20-30% of the CSS code you had written in this tutorial, but… I really really love the glassy coming down navbar. Top suggestion for my website revamp! Thank you so much for your stuff and the way you explain to us.

[@clevermissfox]

So excited to be able to use scroll driven animations in production(sans polyfill with the bugs ive heard of). Same with viewTransitions. Love that KPow is covering these.

[@thecoolnewsguy]

"Show off your love for CSS" Bold of you to assume I love CSS

[@bopuc]

Kevin, awesome. Thank you so much for this, and thanks to the CSS Working Group and the browser peeps and all involved. I needed this 5 years ago, 10 years ago, 20 yers ago… but now I am dating myself. 😅 I want to make a "meta comment" about the video production, if I may. I have a neurological condition that is currently getting more and more popular (go on, guess…) and one of the wonderful challenges it creates for people like us is very very very limited "working memory" (tied to difficulties with attention…). One of the ways this manifests when working with code is that if I don't see *all* the code involved in something I am trying to do in front of me, I get lost. The moment it drops off screen, it ceases to exist in my mind and I cannot "reference it" while think-doing the thing I am doing. (That's why my own working setup is a huuuuge monitor, or two: I need to see all the code I am working on at all times.) What that means for this video (and many many other coding-related ones, not just yours), is that anytime you scroll through your code example (or open other files), I lose context and cannot properly follow along. Thankfully you share your code so I can always just go grab it and open it all up, but I just wanted to mention this in case you might be able to figure out some other way to do these kinds of live demo videos. (For starters, maybe the code doesn't need to be so zoomed in… I guess your audience is all on tiny screens?) Not to mention scrolling up and down the code while demoing a scrolling animation and between the two I think I may have almost fallen out of my seat from the vertigo haha kidding ;) Thanks again!

[@dannievinther]

To make it less magic number'y you can use timeline-scope. That way you can, for instance, track the position of the hero component and base the timing of the header animation on that

[@pendaco]

Would it also be possible to do this the other way around? Have a normal menu scroll out of the viewport but if you scroll UP the sticky menu appears. Basically what a lot of mobile browsers are doing these days. The address bar disappears when scrolling down but as soon as you scroll up the address bar appears again. Of course you can always do it with Javascript but a native CSS solution would be so much cleaner imo!

[@BobbyCharlz]

Locally-scoped variables, brilliant! Thank you for helping to introduce me to this and so many other great concepts in this tutorial. Your videos are fantastic and really do help me build a greater appreciation and curiosity toward CSS; there is a ton of greatness that you can pull off with it and HTML alone.

[@ZacHarris_mezoweb]

I never comment… you rock Kevin! thanks ❤

[@simonwxyz]

Would be worth trying bottom: 100%, rather than top: -5rem. Then you can animate in with a transform: translateY(100%). I think... I've not tested this yet, but that's what came to mind. Anyway, very cool to see this doable without js now 👌.

[@sol_in.victus]

I have been watching you for a couple of months now and i always thought you were saying friend and friend 💀 really took me seeing that t-shirt to realize it's front end friend hahah

[@saintinel]

Great Video! ...and those subtle effects are indeed very cool, thanks! ^^

[@LorenzoGasperoni]

I love your work. It helps me a lot and inject me a lot of passion on my work. Thanks ❤

[@ofmouseandman1316]

I have actually zero use for that.... but i'll stay because 2016 me wanted something like that!

[@jonny555333]

I found the polyfill to reduce page speed significantly for what it does. Went from a 96 on page speed insights and dropped to 80 from just the polyfill.

[@jacksparrow4628]

Sir could you please put your best work in one video? Just a summary of what I should put in my highly animated and visually appealing portfolio? For instance you have a lot of css tutorials on amazing animations. Or auto dark or night mode etc. So all I want is a video which describes all your best work and where or when to use it so people can use it in real time.

[@Killyspudful]

That would be a 25 hour video :)

[@octavian3033]

Awesome work. My first time learning about @supports

[@shontam]

Hi Kevin, so weird I was thinking of this exact header and you made a tutorial on it, very weird! I would love to learn how to make a menu (and hero section) that is transparent over an image that covers the viewport (at every resolution) and then changes colour (to white for example) on hover. Under each menu item is a line to signal active link and also hover. Also it collapses to a full width hamburger menu for mobile. Have you done a tutorial for something like this? Would love to learn and I have seen this trend a lot recently. I see this transparent menu all over design inspiration sites like Dribble but no tutorials on how to do it. Thanks!

[@Aguinaldowagas]

You are my savior!!

[@ico0z]

We can color SVGs with mask-image: url(svg)

[@02jaysenghani]

Thank you Kevin❤

[@jfftck]

It is possible to use an SVG image and change the fill color, but it requires loading the SVG into an SVG element on the page using the use element. I’m doing that on my own page and it works as expected, but it is more complicated and I would recommend following a tutorial on how to do it.

Is this what you mean? .logo { display: var(--_logoDisplay, block); fill: currentColor; height: 3rem; color: green; }

[@jfftck]

@ No, this is an HTML snippet for loading external SVG images and have them inline: It does have some limitations, but I don’t like having my HTML cluttered with SVGs. Google “inlining an external SVG” as that will give you a lot more information on how to do it and the limitations.

[@mohdali-yq8gq]

This is your new subscriber and really astonished to see your designing skill set but in the same proportion surprised that why are you not using tailwind instead of css so humble request you to switch to tailwind and provide the tutorials using tailwind as you can make the difference!!

[@franki8469]

All of this animation- features don't work on safari and firefox. I'm beginner webdeveloper and I wonder do anyone use those css animations in real life projects? It's seems awsome but this lack of full compabilty makes it useless for me and I end up using something like framer motion anyway

[@cseymour97]

Because it's not fully supported yet. You'll need a polyfill

[@kill_switch_101]

u r great, u r the new Mozilla MDN Web Docs for me

[@avgvstvs96]

Would you consider making a video on layout shifts? I’m coming across layout shift in some of my component, particularly navbars. i was wondering what can be done to mitigate these issues?

[@mocassine1]

Can you make a video for CTA button to NAV BAR on scroll

[@10sylv10]

Is there no way to use view() to trigger an animation with a duration? The scrolling effect is cool but it would be ideal to have the control over how the animation plays once it enters the viewport.

[@dawnz4980]

could someone tell me the benefit of doing this over using javascript? very cool and informative video none the less!

[@LokiDaFerret]

Noice! However if you are going to be assigning properties to other properties like you've done with LogoAfterAnimation you really should put the name of the property you are manipulating so a better name might be LogoDisplayAfterAnimation

[@user-ko1cw6mv4q]

Great video❤

[@r4de_adv]

Why are the colors from media query for the dark theme ignored?

[@RandomGeometryDashStuff]

19:20 why use rem unit for blur amount (blur more if user chooses bigger font size in browser settings)?

[@ahooton]

Just tried this in my own project and it works great. However, when using 'position: sticky' my nav stops sticking when I scroll as far as 100vh, but when I switch back to 'position: fixed' it works fine and my nav will continue to stick for long page scrolls. I've checked the documentation but still can't quite wrap my head around what's happening 🤔

[@wootwoots]

animation-timeline is not yet working on firefox 😭

[@parenteseswebdev]

What about accesability issues?

[@thedacian123]

Intersection observer js api?

[@AISHAISHWARYA]

Surface annimation kaha se copy karke pest kiya sir

[@Azurryu]

New web developers nowadays will never understand the pain of coding for the web 20, hell even 10 years ago. I love any advancements that reduce the need for JavaScript and don't break the entire site on browser versions that don't support new features. Some of our customers regularly report Safari 12 issues tho because they still consider 10 year old apple devices relevant :(

[@thrumilens6328]

Dude we only drop support for IE in the last two years. Imagine that 😂

[@VasilyPavlik]

After every video I go to caniuse and check when I can get rid a big part of my code/html/css. So, for now FF and Safari are out of the scope. Sad. But anyway, let's wait for the next year.

[@ianski9898]

Will it slow it down the website or styles loading? Sorry, As i dont know how can i make my css load faster

[@Black1991Star]

animation-timeline suported only Chrome)

[@KevinPowell]

Yup, and it's also past 70% global support now as well... which tells you something about the browser market 😅... but I also did address a few different ways you can approach browser support in the video too :)

[@wah0wah]

Why does top:-5rem isn't run at the beginning, only on scroll?

[@KevinPowell]

It is working, but by being a negative, it sticks 5rem above the top of the viewport, so it's out of view,

[@dragon3602010]

awesome and can we do it in tailwindcss too ?

[@DeepTitanic]

This is why I hate Tailwind

[@acubley]

You... you don't have a dark mode option for the T-Shirt? I genuinely disappointed, Kevin. 👀

[@KevinPowell]

I worked on a dark version with my designer, but neither one of us particularly liked how it looked on a dark material, sorry! My Grid shirt is on a dark shirt :D

[@acubley]

Can't have everything, I guess. :-)

[@madhurchaturvedi5551]

Sir please teach us how to make drop down in tailwind responsive

[@erickdavid4257]

no tailwind on this channel-just CSS

[@KevinPowell]

I don't cover tailwind here, but if you watch my responsive nav video where I do it with regular CSS, it should point you in the right direction

[@user-cb6lo1rb8t]

learn using regular css. Kevin is not going to cover tailwind anyway

[@malekabo2837]

HELLLO MY FRIEND AND FRIENDS

[@danielcrompton7818]

It’s Front-end friends

[@terfy]

CSS 2.1 with XHTML 1.1 strict = good times.. today HTML5 and CSS3+ = suck.

[@Aleksandra-fw1uz]

why don't you work in sass?

[@whatamiwitnessing1003]

Not useable till all major browsers support it, which will take a while.

[@erickdavid4257]

you must be fun at parties

[@KevinPowell]

Why not? It's *perfect* for progressive enhancement.

[@LokiDaFerret]

This animation is really confusing me because if you've started to start at 150 VH that should be 150% of the viewport height. Yet you are only scrolling a fraction of the way down and it's starting???? So confused 😢

[@KevinPowell]

100vh would be the top of the viewport. The offset from starting is starting from the bottom. So 0 would be the very bottom of the viewport, because it's watching the scroll of the element into the viewport (as you scroll down), and then out the top. So, by doing 150vh, we're going 50vh higher off the top... hopefully that makes sense 😆

[@LokiDaFerret]

@@KevinPowell I think I'm measuring backwards. I'm looking at how far you have scrolled down the page. I don't think that's the right place to be looking. It's relative to the UI element and it's position within the viewport yes?

[@piyushkothari3]

Having these magic numbers do not work in the real world with tons of different screen resolution and sites being dynamic with cms

[@RossPfeiffer]

i can't wait for ai to replace all this

[@danielcrompton7818]

Me too! It pretty much was with me.

[@AdolfRizzler41]

Should we use js for performance? And what are your thoughts on gsap scrolltrigger for this

[@Killyspudful]

No, it will absolutely perform better without GSAP / JS.

[@BigWealthySchlong]

What about switching back to that black bg navbar later down without js? :)