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

День тому

Looking to step up your CSS Game? I have free and premium courses 👉 kevinpowell.co/courses?...
🔗 Links
✅ First version: codepen.io/kevinpowell/pen/Ba...
✅ Second version: codepen.io/kevinpowell/pen/md...
✅ More on scroll-timeline: • Incredible scroll-base...
✅ CSS-only text-reveal effect: • Can I copy this text r...
✅ The Polyfill: github.com/flackr/scroll-time...
✅ Browser Support: caniuse.com/mdn-css_propertie...
⌚ Timestamps
00:00 - Introduction
00:43 - merch
01:08 - The HTML and starting CSS
02:10 - Adding position: sticky
02:49 - Creating a simple animation
04:50 - Making the animation work on scroll
05:25 - Controlling when the animations starts and ends
08:35 - Making the distance more intuitive
11:55 - Adding more custom properties
13:42 - Dealing with browser support
16:18 - The glashmorphism version setup
17:20 - Making the nav slide in once we scroll down
19:20 - Adjusting the width of the nav when it reappears
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my UKposts channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

КОМЕНТАРІ: 81

@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 29 днів тому

So people are starting to realise...

@goranspasic4977 25 днів тому

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

@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 Місяць тому

@FXY_ Місяць тому

happened to me as well 😂

@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.

@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.

@saintinel Місяць тому

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

@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.

@LorenzoGasperoni 12 днів тому

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

@thecoolnewsguy Місяць тому

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

@02jaysenghani Місяць тому

Thank you Kevin❤

@ZacHarris_mezoweb 20 днів тому

I never comment… you rock Kevin! thanks ❤

@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!

@octavian3033 Місяць тому

Awesome work. My first time learning about @supports

@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!

@Aguinaldowagas Місяць тому

You are my savior!!

@kazarin0v Місяць тому

Super video. Thanks)

@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

@user-ko1cw6mv4q Місяць тому

Great video❤

@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

@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?

@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!!

@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!

@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.

@mistersimeeec Місяць тому

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 👌.

@ofmouseandman1316 Місяць тому

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

@dawnz4980 Місяць тому

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

@ico0z Місяць тому

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

@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 :)

@RandomGeometryDashStuff Місяць тому

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

@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.

@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

@ianski9898 Місяць тому

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

@wootwoots Місяць тому

animation-timeline is not yet working on firefox 😭

@thedacian123 23 дні тому

Intersection observer js api?

@parenteseswebdev Місяць тому

What about accesability issues?

@AISHAISHWARYA 26 днів тому

Surface annimation kaha se copy karke pest kiya sir

@kill_switch_101 Місяць тому

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

@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.

@r4de_adv 24 дні тому

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

@dragon3602010 Місяць тому

awesome and can we do it in tailwindcss too ?

@DeepTitanic Місяць тому

This is why I hate Tailwind

@LupoTosk96 Місяць тому

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 😂

@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. :-)

@malekabo2837 Місяць тому

HELLLO MY FRIEND AND FRIENDS

@danielcrompton7818 Місяць тому

It’s Front-end friends

@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,

@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 :)

@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

@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

@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?

@RossPfeiffer Місяць тому

i can't wait for ai to replace all this

@danielcrompton7818 Місяць тому

Me too! It pretty much was with me.

@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?