This is is an old comment but it's at the top for me so I'm gonna respond. I agree. Knowing how to do something probably won't stick unless I also learn *why* I want to do this. If use cases are given, then the knowledge stops being abstract and starts being another tool in my belt.
Nice that you are humble enough to share these tutorials!!!! Thanks a lot. I'm starting as a front end developer and you have been helping a lot. Shout out from a Brazilian living in Amsterdam!!! Thanks again Man!!
Thanks, Well if you ever wanna come and see it for yourself you got a bud, thats how I have to repay you for putting good free content on the internet. Have a good one!
This is an amazing tutorial. I keep coming back to it for various things. You were an mazing teacher and I learned a lot of stuff especially CSS from you. Its very sad that you left youtube.
I've been a daily youtube watcher for years, but yours is actually the first channel I use the subscribe button to, very good content and teaching material, I'm on a viewing streak now.
Cheers Trav, I haven't been on for a while but back to web design now so it's good to be seeing/hearing you. Decided I'm going to be using Transform more now so this was super useful. Thanks again!
overall dude, you're a cool developer, who shares his knowledge with others, and that everyone appreciates your work is a fact, nice job, hope to see a lots of new stuff from you soon :)
I'm abolutely in love with the style of this episode. Especially the nice colour animated backgrounds. I'm wondering, how did you/your editor do that? Would love to intergrate something like that in a presentation for example.
As always Travis, great job. Can't wait for the next part. There are always these little hidden gems in your tutorials that I keep using for my own projects. I never thought of making more complex transitions with multiple elements. Thanks again!
Dude, just the ease with which you explain things is so damn impressive. I watch you and it makes me go and want to teach more people. Massive respect!
your perfect dude , your presentation just attract me so much and your ability to speak english and make the audience to understand all of the parts of the subject, my english sucks but i understood you very well thanks a lot for making this perfect video for free best regards
Bro, you make the best tutorials I've seen. You go deeper into things and talk about performance, and what should and shouldn't be done. You should make an Udemy course, if you did I would probably buy all of them.
Very helpful! I mean, I know this, it's not something new, but the explanation is really good and Travis actually gives me some ideas for my own websites with these tuts. Thanks Travis!!!
Righty said, even when I first used pointer event for JavaScript in my CSS I just wowed. My reaction was same just like you, why people don't talk about it that much. Pointer event sometimes really helpful. I used pointer event none for an icon used inside an anchor or button tag. This is every useful when you add event listener to button or a link with an icon inside. This will stop event bubbling for the element.
position: left,right,absolute, relative could be animated if the browser calculated the coordinate position of all the elements after the change occurs and then applies a movement(translation) transformation to all the affected elements.
Trav you're awesome. the quality of your videos is getting exponentially better! I'm in the process if finding me a job (or paying clients) in web development after deciding to change my career plans to this. once i get something going you're definitely going to be getting a new Patreon. :)
Ahhhh.... I had the jittering problem on my webpage (I'm flipping cards) and now I know to place the hover transform on the container. :-) Thank you! -Many blessings. I learned something today.
Loved your explanation and just wanted to add something I find really useful when using the transition property. If you want your object to transition one way, and then transition back to its original state a different way, set a transition property on both the original and transition states. In this case the transition property set on the :hover or added class state will affect the transition TO that state, and the transition property added on the original element will affect the transition BACK to its original state. Can make for some pretty cool combinations :)
Just wanna say big thanks to you ... just learned that the free Shotcut video editor supports html overlay (I started noticing how powerful it is by just using the marquee tool to insert scrolling text to my video) Then, I saw your video on CSS keyframes ... Thinking of creating a highlight effect with pan & zoom using CSS Thanks again... subbed
Not entirely sure but I think transform and opacity are cheap to animate since they can be promoted their own layer and then be processed on the compositor thread not triggering layout and paint. To do this you'd have to set will-change in the CSS otherwise I think it'll trigger layout paint and composite and hence not be cheap to animate
I would love to see a public github repo with the code examples like you did in the "Parallax on the web" series with this amazing PR discussion video. Its like a more advanced "Comment on comments" thing and I loved it!
I really like your videos and how you explain things and not just code through it. I wasn't able to get my js triggers working since i didn't have jQuery on my local. but great video.! subscribed !
Amazing video man, I've always wanted to l know how to make my elements have a bounce effect I thought it would be done through key frames but cubic bezier makes it much easier! Thanks Travis!
Maybe it's a good idea to lower the brightness of you're screen when viewing the (powerpoint) slides. Because the background colors of the slides are reflecting on you're face. Beyond that, it's a good video where I learned a lot from! Keep it up and thanks! :)
Great Video Travis, as always (i know CSS transition but this is your video so i will definitely gonna watch this) Next, you should make a series on CSS media queries and then convert non-responsive sites to responsive (that would be really cool) :D
I'm learning web development since last few weeks but still not getting "when, how, which" CSS to use ? HTML is quite straight forward; just use particular tag with attribute, but CSS am really confused. If somebody is working in industry or quite good with CSS; kindly share your experiences. I'm pretty confused with CSS now; ending up jumping from one problem to another without achieving end results. Thanks in advance.
#devtips{
transition: thumbs-up now;
}
Hahah, I see what you did!
thumbs up for you then
$ is not defined
I swear my jaw literally dropped at 17:39. 🙌
Awesome Tutorial. 👏
Woooo! Still got it :P
I like that you go over actual use cases unlike the "static by-the-definition" tutorials most people put out. I hope this series lasts a long time :)
Thanks Wolfers! Me too!
This is is an old comment but it's at the top for me so I'm gonna respond.
I agree. Knowing how to do something probably won't stick unless I also learn *why* I want to do this.
If use cases are given, then the knowledge stops being abstract and starts being another tool in my belt.
When I first started to learn Web Dev came across one of his videos, the rest is history!
wow its been 5 years..., good to see you again. and thanks you guys help me a lot
Nice that you are humble enough to share these tutorials!!!!
Thanks a lot.
I'm starting as a front end developer and you have been helping a lot.
Shout out from a Brazilian living in Amsterdam!!!
Thanks again Man!!
You are welcome, and good luck in Amsterdam, I've heard its a cool place :)
Thanks, Well if you ever wanna come and see it for yourself
you got a bud, thats how I have to repay you for putting good free content on the internet.
Have a good one!
can't wait to see the key frames tutorial haven't managed to wrap my head around key frames in CSS
See ya in 7 days :P
This is an amazing tutorial. I keep coming back to it for various things. You were an mazing teacher and I learned a lot of stuff especially CSS from you. Its very sad that you left youtube.
I've been a daily youtube watcher for years, but yours is actually the first channel I use the subscribe button to, very good content and teaching material, I'm on a viewing streak now.
I'm honored
Cheers Trav, I haven't been on for a while but back to web design now so it's good to be seeing/hearing you. Decided I'm going to be using Transform more now so this was super useful. Thanks again!
You are welcome! Good luck :)
overall dude, you're a cool developer, who shares his knowledge with others, and that everyone appreciates your work is a fact, nice job, hope to see a lots of new stuff from you soon :)
Thanks Edik :)
DevTips is at his roots :)
:)
Do a video on Must have Chrome Extensions for Developers
+DevTips Yeah, great idea
Awesome style of performing a tutorial. I like your calmness. Thx for your effort
I'm abolutely in love with the style of this episode.
Especially the nice colour animated backgrounds.
I'm wondering, how did you/your editor do that?
Would love to intergrate something like that in a presentation for example.
As always Travis, great job. Can't wait for the next part. There are always these little hidden gems in your tutorials that I keep using for my own projects. I never thought of making more complex transitions with multiple elements. Thanks again!
You are welcome Hawk, thanks for watching!
This guy deserves a lot more subscribers I learn so much
Way well explained! And you went for the little tricks and gotchas and best practices.. thanks for doing this!!
Dude, just the ease with which you explain things is so damn impressive. I watch you and it makes me go and want to teach more people. Massive respect!
i will never see CSS same after ur video ! thnks
TIL about codepen in the despription of the video, woooahhh, fantastic tool. thank you
opaycity
Humongos Wot?!?!?!?!?!
opacity:0.9 - 0.1; }
for a second i thought i was pronouncing this wrong my whole life >_>
lol, for some reason I can't stop laughing with this comment
huver huver huver :DD
what a style of yours of speaking? love it.
your perfect dude , your presentation just attract me so much and your ability to speak english and make the audience to understand all of the parts of the subject, my english sucks but i understood you very well
thanks a lot for making this perfect video for free
best regards
Thanks for all the videos Tdog! lol your my favourite channel man please don't stop the videos. Much Love!
Wow, One of the best tutorial videos I have come across, really like your style, thank you.
Simple, clean, and easy to understand. Thank you for the great work!
every time you teach me new stuff, keep going like that...
okay :)
you're the best teacher for me now
Loved it Travis, solid job. I will support through patreon for sure soon please keep rocking it.
Bro, you make the best tutorials I've seen. You go deeper into things and talk about performance, and what should and shouldn't be done. You should make an Udemy course, if you did I would probably buy all of them.
Thanks Travis, you literally saved my life.
Pay it forward :)
I like this type of videos where it goes in dept of the subject. Keep it up!
Thanks!
It was a really good tutorial. You gave good examples of how logic works.
Very helpful! I mean, I know this, it's not something new, but the explanation is really good and Travis actually gives me some ideas for my own websites with these tuts. Thanks Travis!!!
You are welcome, glad you like it!
helped me so much, I was looking for that trigger several hours!!
Fantastic tutorial, as they all are! Thank you.
DevTips: The definition of a great UA-camr :D I lofe your tips series and 117 likes to 0 dislikes is amazing :P
Thanks ImStorm!
The best teacher ever.
Excellent video Travis - thank you.
Awwww i miss this so much!
cant wait to see next part,..
great tutorial trav
Righty said, even when I first used pointer event for JavaScript in my CSS I just wowed. My reaction was same just like you, why people don't talk about it that much. Pointer event sometimes really helpful.
I used pointer event none for an icon used inside an anchor or button tag. This is every useful when you add event listener to button or a link with an icon inside. This will stop event bubbling for the element.
YOU ARE THE BEST TEACHER !!!
You are The best in our Planet Trevor !
css transition just made sense. Thanks
currently i am obsessed with animations & i was really excited to see you are doing a eries on it! thanks for that! can´t wait or the next video! :)
Awesome!!
This was a great video. You have a great explanation of how to create CSS Animation!
Thanks :)
position: left,right,absolute, relative
could be animated if the browser calculated the coordinate position of all the elements after the change occurs and then applies a movement(translation) transformation to all the affected elements.
Wonderful CSS Lecture Video! Aroind Frames 8:10 you took me straight back to OldSkool *After* *Effects* 4.1 !
17:17 - oh my god. this is the moment me and the universe was one. Now I understand!! Thanks!
Awesome tutorial for beginners, Whenever i watched this video really impressed with this way of designing. thank you man !!
Trav you're awesome. the quality of your videos is getting exponentially better! I'm in the process if finding me a job (or paying clients) in web development after deciding to change my career plans to this. once i get something going you're definitely going to be getting a new Patreon. :)
That's great! good luck on the hunt!
Ahhhh.... I had the jittering problem on my webpage (I'm flipping cards) and now I know to place the hover transform on the container. :-) Thank you! -Many blessings.
I learned something today.
Thanks so much! Great breakdown, looking forward to the key frames vid!
You sound almost just like Tom Segura. Best tutorials I've seen on here. Keep up the good work.
Loved your explanation and just wanted to add something I find really useful when using the transition property. If you want your object to transition one way, and then transition back to its original state a different way, set a transition property on both the original and transition states. In this case the transition property set on the :hover or added class state will affect the transition TO that state, and the transition property added on the original element will affect the transition BACK to its original state. Can make for some pretty cool combinations :)
Awesome idea!! 2fer!
Fantastic video, Travis. I can't wait for the next one! Thanks for all you do :)
Thanks Alexander!
Just wanna say big thanks to you ... just learned that the free Shotcut video editor supports html overlay
(I started noticing how powerful it is by just using the marquee tool to insert scrolling text to my video)
Then, I saw your video on CSS keyframes ...
Thinking of creating a highlight effect with pan & zoom using CSS
Thanks again... subbed
Subscribed. Didn't know about pointer-events
Thank you Travis for your awesome tutorials!
You are welcome!
nice travis looking foward to it
yay!
Awesome video, love the simplicity!
THIS WAS EXCELLENT
i learned something new today; "pointer-events:" thanks brother. (javascript scares me)
everyones laughing at how you say opacity...but im laughing because you said everyone loves a pink box lolll. awesome tutorial btw
Not entirely sure but I think transform and opacity are cheap to animate since they can be promoted their own layer and then be processed on the compositor thread not triggering layout and paint.
To do this you'd have to set will-change in the CSS otherwise I think it'll trigger layout paint and composite and hence not be cheap to animate
you're my css hero
This is the way you teach it! You rock Travis :D
Thanks Aravind :)
I like where this is going
haha, thanks max
Yeah more practical web developement tutorials. THANKS Travis..
had to watch this for class
I would love to see a public github repo with the code examples like you did in the "Parallax on the web" series with this amazing PR discussion video. Its like a more advanced "Comment on comments" thing and I loved it!
Good suggestion, but as it is right now, i've got them running in codepen
Man you are the best!!! Keep going, you are talented as a teacher!!!!! Thank you!
Your CSS tutorial is awesome. Thanks man!
Good personality and content. I enjoyed learning with you. Thank you.
Another awesome tutorial... thanks Travis!!!
You are welcome!
FYI watchers! Travis is using JQuery libary, make sure you import it if you're trying to mimic this pen.
I really like your videos and how you explain things and not just code through it. I wasn't able to get my js triggers working since i didn't have jQuery on my local. but great video.! subscribed !
Really nice explanation
Thanks for your tutorials Travis¡¡ Saludos desde Colombia
pointer-events: none;
yes, totally!
+Abdul Ghani web can never die dude.. one big example is myntra... #invinsible
The hell are you talking about...?
Sergi O Who are you talking to ? you should googly plus them (+) :P
+ADG you are using a web platform right now. What do you mean by "they are dying"?
Amazing best video on transition Love it
this is..remarkable
Excellent work!!!! Thanks for the help.
I can't like this video twice... Therefore 5 stars from me ⭐️ ⭐️ ⭐️ ⭐️ ⭐️ 5/5
Great video!! Answered a lot of questions!
Amazing video man, I've always wanted to l know how to make my elements have a bounce effect I thought it would be done through key frames but cubic bezier makes it much easier! Thanks Travis!
yea, its a nice little hack :)
Thank you for the awesome video and series Travis, really looking forward to the UX part :)
Awesome, thanks!
JUST AWESOME!!!! Thanks!
Thanks for this, really helped me out in understanding this styling property :)
Very good tutorial i really love all video you make you look like my teacher.
Thank you.
U always save me on my works, thank you Travis (:
That's great!
Maybe it's a good idea to lower the brightness of you're screen when viewing the (powerpoint) slides. Because the background colors of the slides are reflecting on you're face.
Beyond that, it's a good video where I learned a lot from! Keep it up and thanks! :)
I noticed that too! It has something unique and it fits the setting. I find it very cool looking haha
Yea, I noticed that after recording, but then I thought it was kind of cool. Atmospheric.
Great Video Travis, as always (i know CSS transition but this is your video so i will definitely gonna watch this)
Next, you should make a series on CSS media queries and then convert non-responsive sites to responsive (that would be really cool) :D
That's actually a really great idea :) Noted !
I'm learning web development since last few weeks but still not getting "when, how, which" CSS to use ? HTML is quite straight forward; just use particular tag with attribute, but CSS am really confused.
If somebody is working in industry or quite good with CSS; kindly share your experiences. I'm pretty confused with CSS now; ending up jumping from one problem to another without achieving end results.
Thanks in advance.
Thank god for this series
I'll tell him you said that.
Gr8 teaching skill and gr8 lesson as well!
Shit.. Dude! This is the first time i want your video and it is soooo goood!!! Keep up the good work man! Very detailed, very easy to understand!
this video really best than otherrrrrrrrr
Jade hasn't been named such for years -since well before this vid was posted; it's name is Pug.