I’m beginning to love CSS so much more these days. I really appreciate your work in keeping us in the loop with the latest CSS functionalities. 👌
@cmukama Жыл бұрын
This is exactly what I needed to refactor out an old JS animation library. The creator left 3 years ago and nobody knew how to deal with it. Thank you Kevin
@KevinPowell Жыл бұрын
Just watch out for browser support, since it's far from perfect! The polyfill helps, but as I show near the end, it isn't perfect.
@hungry_khid1007 Жыл бұрын
Huh? U dont know javascript?
@cmukama Жыл бұрын
@@hungry_khid1007 It's 5MBs of minified javascript. My 12 years of JS experience are useless here
@lian1238 Жыл бұрын
You can have javascript update a css variable in your DOM whenever the user scrolls. The variable can be absolute pixels or a percentage of the total height.
@mamlzy3 ай бұрын
is it AOS?
@santoshparker8681 Жыл бұрын
We all are blessed to have a teacher like you kevin .
@m.arslansarwar9449 Жыл бұрын
You've made me love CSS. You've no idea how much you're helping us with your content.
@albedesigns8 ай бұрын
Absolutely! Kevin is my go to guy to understanding & learning the more advanced CSS.
@MrWhiteav610 ай бұрын
Kevin, I just wanted to say I've been watching your videos since I first started learning to code. I've moved on to Mobile App development with RN but I still build websites and need help with CSS and you are the GURU! You are also just a pleasure to learn from, I love your personality. Keep being you man! Thanks for all the help!
@steelrazor3 ай бұрын
Big kudos for mentioning "prefers-reduced-motion". It's such a small adjustment and an easy (essential) accessibility win in my eyes.
@alirahmani5601 Жыл бұрын
Really appreciate the longer content; keeping the quality even as far as shooting after editing, thanks for that :)
@AnthonyGruba10 ай бұрын
This is so good, 5 minutes and I know exactly what I was looking for! I have to watch everything if just 5 minutes gave me that much
@rebell57011 ай бұрын
It's so cool to see more and more animation functionality becoming built-in to CSS. 👍🏻
@prathmeshkalehere10 ай бұрын
yeah its great
@k16e Жыл бұрын
The MDN of CSS on YT. How otherwise would I know of this sort of CSS-orcery but for Mr. Powell! Thanks, sir!
@ellisj98 Жыл бұрын
I can’t believe this wasn’t in CSS before in hindsight.. it’s such a good feature. It’s also great to have it native in CSS as it can be easily disabled and enabled depending on the users motion settings.
@simonswiss11 ай бұрын
I finally understood the difference between "cover" and "contain" thanks to this video!
@randomforest_dev Жыл бұрын
The future is bright for CSS! thanks for the video.
@leifn Жыл бұрын
Thank you for this great introduction! Especially the part about the animation ranges would be a pain to figure out by oneself.
@WUOTH Жыл бұрын
Thank you and perfect timing, just what I need for an ongoing project :)
@madisonkeck12307 ай бұрын
Thanks!
@erikvanzanen10 ай бұрын
Ok, here I am using a Jscript to make an image move from left to right, from a certain point you scroll by on the page. This is great
@rafelgrau7 ай бұрын
Just that you will not be able to use it until at least one more year, that is if you put it in a commercial webpage
@mimoduocss Жыл бұрын
I was looking for viewport based animation timeline and it was view() the entire time! My brain is too mushy for MDN docs, thank you!
@ScottMackey Жыл бұрын
Just an amazing demo and explanation Kevin!! It's so nice to see the css is close to where is should be, handling all the basic animation and visuals that javascript had to do for css. Thanks again 🙂
@avi12 Жыл бұрын
12:39 Rather than wrapping the CSS with a media query, it's easier to set the animation as intended and then add in a reduced motion media query that resets the animations on the page
@christophedelobel3904 Жыл бұрын
POWER of CSS, thanks for this demo.
@hw562211 ай бұрын
Amazing! I was looking for how to do this with simple css. Thank you so much!
@PacificDev Жыл бұрын
too late to watch it at 1am, but I know I'll need this at some point so saved and liked 👍! I should pay you a coffee at some point for all tips and tricks I learned from you. Thanks for the amazing work Kevin 🙌
@adrianperdomollerena58848 ай бұрын
Dude you are awesome, Ive always loved CSS but you make it even cooler to be a front end dev, now I can talk about reducing javascript and interception observers at work so we can add more nice animations
@fksociety137 Жыл бұрын
Love it! Great post as usual Kevin!
@tomcat1112k Жыл бұрын
thank you for the amazing thoroght video Kevin. Loved it. i'll use the banner animation in my university assignment. and I'll obviously give you credit for this in the reference.
@Jaguar_Uche27 күн бұрын
Where is the beginning of the video please???
@gabuhl95096 ай бұрын
Thanks a lot Kevin!! , Top most valuable CSS information!! Thanks a lot for sharing!!
@brobinbraauw552311 ай бұрын
this video is so good, thanks a bunch! Going to start using it for my own projects right away!
@trinidadfaccini10069 ай бұрын
thank you for this tutorial, amazing explanations loved that you mention the small -but big- considerations that we must have when creating a website so that it is accessible and navigable for everyone
@Cognitoman9 ай бұрын
Safari and Firefox is a no go
@Jaguar_Uche27 күн бұрын
Where is the beginning of the video please???
@seeds.ffmpeg Жыл бұрын
I'm assuming scroll looks at the stacking context by default, it's neat you can pass it root. Thanks a lot for the video! You're the reason I've been keeping up with new CSS features.
@havefun55199 ай бұрын
Nice step-by-step tut.
@carbellsarfo9 ай бұрын
This was so helpful Kevin. The part about animating the hero section, The animations are not working, when I copy the same code and put it anywhere else, they work perfectly.
@mohammadmahdialvansaz8001 Жыл бұрын
this is just what i need right now. thank you
@jenstornell7 ай бұрын
Best video I have seen this week. Congrats! 🎉
@albedesigns8 ай бұрын
This is perfect... exactly what I was hoping to be able to do without JS. CSS really is amazing!
@dixxixio Жыл бұрын
I really learn a lot from your channel. Thank you for your generous hardwork.
@fersahahmet9597 Жыл бұрын
that was awsome, exciting to learn and again Kevin ,thank you
@Jaguar_Uche27 күн бұрын
Where is the beginning of the video please???
@theia135710 ай бұрын
thank you! needed this to get started on animation
@MusfikaAkter-ki6rkАй бұрын
Wow kevin. I just love this . Thank you so much.
@MoussaSaiditv11 ай бұрын
This is the most amazing tutorial I've ever watched. Amazing feature and the way you expalained it made it looks easy. Thank you ❤
@WarehouseDev Жыл бұрын
Amazing what you can achieve with only CSS these days! Thanks, Kevin
@mouhamadalmounayar21999 ай бұрын
I love this dude because he actually explains things.
@Jaguar_Uche27 күн бұрын
The video is incomplete???
@kevinfisher7032 Жыл бұрын
Wow CSS is really kicking it these days! On a side note it’s interesting that the “forget-that-we-do-it-this-way- now” cycle is getting shorter and shorter. It’s seems like only yesterday we were struggling with intersection observers and now….oh, forget all that... we have a few lines of CSS now :-)
@MikkoRantalainen8 ай бұрын
Great video! All I can say about this feature is that it sure took a long time until a standard method to do this appeared. And it'll still take some time until it will be supported in all browsers. And if you want to see support for this in all browsers sooner, DO NOT USE POLYFILLS. When end users see that their browser cannot show fancy effects, they will switch to better browsers - which puts a lot of pressure to the developers of the browser that doesn't yet support these effects to implement them. Remember that you must always make the content usable without scroll effects because some users opt out of animations because of health issues so you should definitely not try to force effects on them.
@memcap10 ай бұрын
Do you experience a horizontal scrollbar issue when scaling the background image up in "the hero area animation" section of this video? It seems that we need to set overflow to not be hidden in order to use the view() and scroll() CSS functions. This animation appears to distort layouts by increasing the width of the container of the background. (Chrome on Windows.) Great content. Thanks for your efforts.
@alphawebtips2950 Жыл бұрын
Thank you, Kevin. I'm definitely trying these out.
@combinio9533 Жыл бұрын
I truly appreciate Your css skills. Also, great teaching approach! Thanks for sharing :))
@gholapyash11 ай бұрын
Thanks sir, This is what I was looking for and this is gonna help me to make my portfolio much better without using that old library 🙏🏻
@DrewDoesDevops7 ай бұрын
Hello Kevin! Thank you for the video! I do have a suggestion: For newbie coders that are watching videos like these, can you take some time to explain some of these concepts to those of us not fully familiar with them yet? I get that some of the concepts may and will make sense the further along us newbies would get, however, that would be SUPER helpful. Keep up the AWESOME WORK!
@Jaguar_Uche27 күн бұрын
Where is the beginning of the video please???
@kevin05310011 ай бұрын
謝謝!
@KevinPowell11 ай бұрын
Thank you so much!
@___rituraj___ Жыл бұрын
Hey man, when it comes to CSS , you always rock and outshine others🚀🔥 So why don't you curate a structured playlist by arranging all your made videos in such a way that a beginner can learn CSS from basics to advance and such playlist will also get a good reach. It will also help self taught programmers to learn from one place instead of hopping from one resource to another.
@mrnabby4178 Жыл бұрын
Learnt a lot of things. Thanks sir.
@udit.roshan11 ай бұрын
This makes EVERYTHING so easy now.
@BrendansReasons10 ай бұрын
learning so much so quickly here
@LorenzoGasperoni8 ай бұрын
This video teach me so many new features. AWESOME! Thanks a lot!
@Officialdave997 ай бұрын
This is so wonderful kevin!
@khuramchef6521 Жыл бұрын
You are making great points that are in-trending Thank you @Kevin
@emmanuelmantilla1465 Жыл бұрын
You're great Kevin, who would thought now we can use CSS instead of intersecting everything
@GilGoldshlager Жыл бұрын
Great stuff, will use it for sure 👍👍👍
@maximilianoInfinito11 ай бұрын
Thanks for sharing this! Kevin you are awesome!
@corykey91878 ай бұрын
Wow I discovered line-height: 1cap and this in one week. Game-changing times. Thanks!
@avivperets73608 ай бұрын
Damn i can watch your work for days haha, Thanks alot you gave me lots of inspiration from this video
@kokapeli Жыл бұрын
This is so awesome! Great video, thank you!
@0muhammedirfan11 ай бұрын
Thanks alot bro❤
@josephm.6676 Жыл бұрын
@Kevin great topic choice. 👏 🎉 Love to see this!
@julientattevin Жыл бұрын
At 20:00 about the horizontal tag, you use scroll(root), would view() also work ?
@АлександрЧеремных-ц9б Жыл бұрын
You are great person, keep doing, you make people happier
@dirty-kebab11 күн бұрын
This is brilliant!
@myfreedom429 ай бұрын
that dont works on firefox... so unable to use it in production. Do you know when FF will add this CSS update ?
@codewithsehran7 ай бұрын
That's the video what I'm searching for 1 days i sawed it before in somewhere!
@JasonAul11 ай бұрын
Is there a repo for this demo you showed us?
@AniketEdot7 ай бұрын
Hey Kevin! thanks for this video. It really was informative. However i noticed when i used the animation-timeline: view() property, it seems to work on all devices, EXCEPT safari and ios/ipad os. Is there anyway to fix this? or do i have to use js ? Thanks
@rodrigonoales Жыл бұрын
Hi Kevin, great video... question, did you test this with native lazy load for the images ? I mean, does lazy load break the visual effect in any way, like jumps in animation or it still works smoothly as it loads the assets? Thank you !!
@skyfall29848 ай бұрын
Thank you very much for what you teaching us here.. god bless you
@SrinivasReddy078 ай бұрын
CSS God @Kevin Powell. This is awesome, learned a lot. Thank you Kevin.
@GarethField Жыл бұрын
I love that he leaves in the naming whoopsies and everything, it’s such an affirming, “*You* *can* code!”
@Jaan-g9r28 күн бұрын
Bhai Aaron Finch ke saath 4ra events aur bhi bright aur better ho gaye, real fun hai
@MichaelJoseph83 Жыл бұрын
You're the goat Kevin
@vanesanchez55788 ай бұрын
jojo! Sufrí mucho para lograrlo 😅 porque agregué el efecto a un sitio ya hecho con Tailwind, pero se logró y aprendí! 💪 Gracias!
@paweliszka44 Жыл бұрын
I was totally at that point "ohh @animations why I miss that exists LOL" you made my day :)
@AlexanderBelov-y8o Жыл бұрын
What a time to be alive!
@EmmanuelB Жыл бұрын
that's incredibly useful and powerful! Thanks!
@ন.ই.রিমন10 ай бұрын
Oh Kevin!! You are the boss❤❤.
@portfedh11 ай бұрын
very cool! Thank you for teaching this!
@alexway3033 ай бұрын
Cool stuff. But it was difficult to understand or replicate horizontal scroll animation (16:04 - working with scrollbars that are not the main viewport), cause essential part of the code is behind the scenes.
@marvell88625 ай бұрын
i love the way you laugh when you teach
@szym6r10 ай бұрын
Hello! Thanks for this explanation! BTW There is any way to fix 'header-image-animation' if sporadically it doesn't work? I noticed after quick scroll to the top the opacity is still set to 0. When I open WebTools it's appears with correct opacity.
@ΝικόλαοςΤζουνάκος11 ай бұрын
awesome video again!
@iboy3511 ай бұрын
Why not say up front that it doesn't work with Safari and Firefox?
@Developer_Yusuf Жыл бұрын
I am confusing. No words. Kevin is the best
@billycroacker4 ай бұрын
Man, I swear on my head: in the first 30 seconds you summarized everything I have been looking for during the whole afternoon without finding decent and concise results. Now I came here two minutes ago and boom: problem solved. God bless you 🥲
@Jaguar_Uche27 күн бұрын
Where is the beginning of the video please???
@explorsterАй бұрын
This is so sick
@Jaguar_Uche27 күн бұрын
Where is the beginning of the video please???
@Thanish12327 күн бұрын
4ra ke features aur interface dono hi best hai, full on maza aata hai
@Jaguar_Uche27 күн бұрын
please where is the html and the basic codes for this
@choosyphil10 ай бұрын
Really helpful video! At 16:24 you are referring to another demo, whats the name of it?
@thematrix2911 ай бұрын
this is great, Kevin! 😮😄😃
@Rajababu-e9m1m27 күн бұрын
Bhai Aaron Finch 4rabet ka ambassador ban gaya, ab toh maza hi maza hai
@RodrigoNishino Жыл бұрын
Very nice! Merry Chirstmas
@khaledfarghly6480 Жыл бұрын
Man You have just choked me by the fact that there is a something new in CSS called @animation and I didn't hear about it.
@olusanyaayomide533611 ай бұрын
Perfect video You're amazing kevin
@dertester1 Жыл бұрын
Man, I just want you to know, that I respect the f out of you, for keeping the little mistakes in there and not editing them out. Like the "animation" and "keyframe" mixup at the beginning. It really shows how natural that is and how it stays that way, even if you worked for years with coding. Also your stuff in general is awesome!