It's amazing how positive this community is, no dislikes so far! I thank you travis, for the effort you put in to make it this positive and also for the amazing and informative videos you make. :)
one comment about: (300ms * $i) - 300 you could've written this instead ;) : 300ms * ($i - 1) this way it would resolve correctly even when you change the ms you wrote (150ms * $i) - 300, which resolves to -150ms delay for $i = 1 which probably doesn't make sense anyway great tutorial, thx for sharing I definitely learned something new today :)
Loved it as usual. Great work!! Just want to share something with your viewers here. One good practice - IMHO - for drop down menus is to make them open on Click and not on Hover. I am sure Travis did it this way for the purpose of showing the animation because it is quicker this way. When a user hovers over a menu and suddenly get slammed by a long list of items, it is quite an annoying experience for most people and the user feels they need to make a decision right away. Moving to the item they want to click on is quite a pain because they might accidently move out of the menu list and lose the whole thing. Frustrating. That's why many people prefer to make the menu show on click and only click. Now the user can click on it, take their time to see what's in there, easily select an item from the list or painlessly click away to close the menu.
The legend lives on! Thanks for all of the videos. A year and a half later - still a great resource! Miss you on YT, man! But at least we have the late-night IL, right! :)
Travis, Your front-end dev videos are no doubt the best I've found on the internet. So first, a huge thank you for all the work you put into helping people like me! (also a designer interested in the world of front end dev) Question: In my specific case it makes sense to also animate the list items as they disappear. ie. after your mouse leaves the menu I'd like to have whichever one that is open, reverse the animation (or at least fade out). I'm using the CSS checkbox technique you shared in another video as my trigger for the dropdown. So when I click it closed I don't want the menu to just disappear like it is now. Thank you to anyone who might have an idea!
Use transitions. They fade out. Alternatively, you have to make a design for the fadeout and trigger that somehow on mouse-out (we are talking JS here now.)
I am thinking about those who dislike these videos. There must be something really wrong with these people. I feel bad for them. Thank you Travis for the amazing work that you are doing.
Wow i was looking for a great animations tutorial for my web design project. This is perfect, you even take time to explain some of the parts which is nice for people like me who is new to web. Keep it up.
Are you kidding me?! I couldn't imagine doing that even with jquery, you handled it with CSS3. I didn't realize css3 is so powerful until I saw this video! Two thumbs up!
I really love this series! It's quality is the best (like always), you explain everything you do, and it's relevant to both Designers and Developers! thanks again for your great content!
The anims didn't work for me. No fault of Travis' because Pug has made some changes since this tutorial was posted. Anyway, If you're running into the same issue. Dylan Stark over at StackOverflow showed me how to fix it. Use this piece of Pug syntax instead of what's shown in the tutorial: ul(class="drop-menu menu-" + i)
Thanks for your videos Travis. I recently got a part-time job as a front end developer, and you helped me A LOT in this field! I will consider for sure the Patron thing when I make more cash! Love you from Barcelona!! (edit: btw Trav, SIX is pronounced SEIS, not SIES lol!)
I nearly bought your opAcity argument, and was going to move forward using your pronunciation.. but then I applied your logic to these words: duality, irregularity brutality, agility, abnormality, curiosity, actuality, brevity...
Probably the best developer on youtube! I'm really grateful for every video you upload. I've been following you for an year or more I don't have much but i was wondering if i could donate you some money to thank you
One thought on your math, Travis: subtract one from the iterator rather than 300 from the result; in this way, if you were to change the delay value of 300ms, the math will still work.
We should make a compilation of all of the intro segments lol Besides that, amazing video! Made me realize that I have never really touched the transform property before. XD
It takes great tenācity to pronounce opācity! You are a pro at instructional videos. I think the code pit Sass may have changed since you made this because I couldn't view compiled CSS when I carefully copied your text for the first animation effect. All that said, thank you for the quality video.
Nice animations! I'm thinking it would be more efficient to have only the changing property in the for loop. That way you're not repeating the same thing several times when the properties are processed by sass, making a much smaller file size. That would only matter for deploying an actual website. I'm guessing you wanted to keep it simple for beginners though. :) I mostly watch DevTips now to listen to your jokes haha, and also to observe your thought process as a designer. I hope to see more vlogs soon, they're my favorite! Keep on hacking, Travis!
Maybe you've done this already, but it would be good if you stepped back and asked yourself: What does DevTips look like in 1 year, 5 years, 10 years, 20 years, 50 years (if you're feeling imaginative)? Do you want other people to make videos for DevTips regularly? There's dozens of other good questions to ask yourself around this. When thinking about the future, I find that the path forward is usually lit by deep introspective thinking. :)
About Menu2, perhaps you intended that ''bouncing' effect of the items going a little bit past zero. This is achieved using qubic bezier timing function, insead of keyframes. You can use the predefined bourbon timing functions - github.com/thoughtbot/bourbon/blob/master/core/bourbon/library/_timing-functions.scss
I didn't know sass was so powerful and a saves time untile i saw that loop there, i had to copy and past my code in vanilla css to recreat what you did with a single loop, not to self: Learn SASS.
+DevTips Need some help I know this might be against the purpose of your present series but can you please do a tut on sprite sheets espeacially creating them from scratch in Adobe illustrator specifically , Many tuts have it in photoshop and i don't use it , I can draw and animate with keyframes I've been successful there in creating the sprite but in terms of targeting the desired IMG this is the struggle for me would like to have better load times and get away from so much individual img's ,So please help me being following you for a while also searched many times through your playlist and channels and nothing on spritesheets. Have a productive day but don't forget my request ok peace.
Ok I just found out about this channel, and I am absolutely amazed of course, my question is, is there any SASS courses made by Travis around? And what other playlists should I watch?
Hey I'm very new to all of this and I was following through the video whenever the list items would not animate individually. I found out that in the CSS, it doesn't have each iteration set up. How can I fix this?
Good stuff Travis! I wish you had shown how to animate the hiding part as well since just animating half of it kind of makes it look half done in my opinion.
I tried 15-20 times still couldn't run that animation I don't know where the problem is but what I figured is that animation text in your editor is being detected as white but not in mine... I have no idea why... Any help please... li:hover > ul.drop-menu.menu-1 li opacity: 0 animation: name: menu1 duration: 300ms timing-function: ease-in-out @keyframes menu1 0% opacity: 0 100% opacity: 1
Hi Travis, I Like it Man. Infect I Like all your videos so, Before i start watching your video I press Like button first. I always talk to my self when i code or design anything. Thank you again for you Awesome Videos.
I know this comment is a bit old, but Prepros is a really great preprocessing program with built in jade, haml, sass, scss, less, and more. It has some great features, like automatically compiling jade, sass, etc when the file is saved. Also great for organizing the files easily, and it has some really cool live view settings for most browser.
It's amazing how positive this community is, no dislikes so far! I thank you travis, for the effort you put in to make it this positive and also for the amazing and informative videos you make. :)
You better edit the 'dislikes' part out because there are sad trolls everywhere :/
+Diyar Baban Well thats why I said "so far" and sad trolls are gonna be sad trolls we gotta focus on the likes ;)
+Riaan Oliver I'm actually one of the OG's...below 1000 subs was when I joined...but I just felt I needed to show appreciation :)
I think one of the best things about this channel is the people that watch and engage. You all are amazing!
+DevTips Which Video Editing software do You Use ?
one comment about:
(300ms * $i) - 300
you could've written this instead ;) :
300ms * ($i - 1)
this way it would resolve correctly even when you change the ms
you wrote (150ms * $i) - 300, which resolves to -150ms delay for $i = 1
which probably doesn't make sense
anyway great tutorial, thx for sharing
I definitely learned something new today :)
isn't 300*0 equal to 0?XD
Do you Have all animation with code then please send same code in video please request you
@@popaandrei2112 yes we wanted the 1st one to be 0 ms bro
a little bit late i know XD
Loved it as usual. Great work!!
Just want to share something with your viewers here. One good practice - IMHO - for drop down menus is to make them open on Click and not on Hover. I am sure Travis did it this way for the purpose of showing the animation because it is quicker this way.
When a user hovers over a menu and suddenly get slammed by a long list of items, it is quite an annoying experience for most people and the user feels they need to make a decision right away. Moving to the item they want to click on is quite a pain because they might accidently move out of the menu list and lose the whole thing. Frustrating.
That's why many people prefer to make the menu show on click and only click. Now the user can click on it, take their time to see what's in there, easily select an item from the list or painlessly click away to close the menu.
That's actually really good information, thanks a lot
The legend lives on! Thanks for all of the videos. A year and a half later - still a great resource! Miss you on YT, man! But at least we have the late-night IL, right! :)
Just the right amount of content, teaching verve and humour to make this an enjoyable learning experience.
Travis,
Your front-end dev videos are no doubt the best I've found on the internet. So first, a huge thank you for all the work you put into helping people like me! (also a designer interested in the world of front end dev)
Question:
In my specific case it makes sense to also animate the list items as they disappear. ie. after your mouse leaves the menu I'd like to have whichever one that is open, reverse the animation (or at least fade out).
I'm using the CSS checkbox technique you shared in another video as my trigger for the dropdown. So when I click it closed I don't want the menu to just disappear like it is now.
Thank you to anyone who might have an idea!
Use transitions. They fade out. Alternatively, you have to make a design for the fadeout and trigger that somehow on mouse-out (we are talking JS here now.)
Hear a pop sound in 1... 2... 3... - 7:30. Great video Travis.
Dude c'mon, WebTech schools are going to go broke because of you xD
if you mean about paid ones... yes...
but what about telerik?
cant be broken
Телерик не е каквото беше...за жалост.
в какъв смисъл - може ли да обясниш че съм от младото поколение
Bulgarian is too funny ;)
..... what dou mean
I do talk to myself when I program.
I am thinking about those who dislike these videos. There must be something really wrong with these people. I feel bad for them. Thank you Travis for the amazing work that you are doing.
I don't look at the likes/dislikes at all. Haters gonna hate. I'm just going to make videos for people who like them.
Wow i was looking for a great animations tutorial for my web design project. This is perfect, you even take time to explain some of the parts which is nice for people like me who is new to web. Keep it up.
Are you kidding me?! I couldn't imagine doing that even with jquery, you handled it with CSS3. I didn't realize css3 is so powerful until I saw this video! Two thumbs up!
Dude. CSS is super powerful.
came here for a drop down menu video, subscribed due to great greeting, man i love the internet
Thank you for all you do Travis. Don't forget about us when you become big
Wow! I can't believe how useful CSS really is!
I got left out. There's a lot to learn in web development now. This is a great video! Thank you for making this.
I really love this series! It's quality is the best (like always), you explain everything you do, and it's relevant to both Designers and Developers! thanks again for your great content!
The anims didn't work for me. No fault of Travis' because Pug has made some changes since this tutorial was posted. Anyway, If you're running into the same issue. Dylan Stark over at StackOverflow showed me how to fix it. Use this piece of Pug syntax instead of what's shown in the tutorial:
ul(class="drop-menu menu-" + i)
me too
Thank you!
Thanks :)
You replace which lane by this one ? :)
Thanks !
You are great man. Can not stop watching your tutorials..
Thanks for your videos Travis.
I recently got a part-time job as a front end developer, and you helped me A LOT in this field! I will consider for sure the Patron thing when I make more cash!
Love you from Barcelona!!
(edit: btw Trav, SIX is pronounced SEIS, not SIES lol!)
Hello Barcelona!! Oh, Thanks!! I'll remember that :)
Thank you. This was one of the best tutorials I ever saw. Such fun.
You are really amazing. Learning a lot from you instead of searching from web.
Travis is back at it again!
I really like your lessons, it doesn't only teach the subject matter, I can also help someone swing out from moody state
Great stuff. Videos like this are going to be relevant for years.
Great Episode! I like watching you doing stuff without knowing exactly how it should look in the end :)
I nearly bought your opAcity argument, and was going to move forward using your pronunciation.. but then I applied your logic to these words:
duality, irregularity brutality, agility, abnormality, curiosity, actuality, brevity...
Probably the best developer on youtube! I'm really grateful for every video you upload. I've been following you for an year or more
I don't have much but i was wondering if i could donate you some money to thank you
Hey Sorrefly, thanks for the comment! You can go to patreon.com/devtips to learn more about donating :)
This is the way...You Are The Best Travis!!!
pssshhhhhh!! You are too nice :)
THINK YOU SOO MUSH MISTER TRAVIS..very nice tut..
As always, great tutorial Travis, you always manage to learn me new things. Didn't think about using loops yet in my CSS. Keep it up ^^
Thanks Hawk, glad you liked it!
One thought on your math, Travis: subtract one from the iterator rather than 300 from the result; in this way, if you were to change the delay value of 300ms, the math will still work.
I'm really loving this series!
We should make a compilation of all of the intro segments lol
Besides that, amazing video! Made me realize that I have never really touched the transform property before. XD
It takes great tenācity to pronounce opācity! You are a pro at instructional videos. I think the code pit Sass may have changed since you made this because I couldn't view compiled CSS when I carefully copied your text for the first animation effect. All that said, thank you for the quality video.
This is just pure AWESOMENESS!
Glad you like it!
i didnt notice those numbers were in spanish till you said it. ;) Greetings from Venezuela
Best navbar tutorial ever!!! keep on with your awesome videos!
Nice animations! I'm thinking it would be more efficient to have only the changing property in the for loop. That way you're not repeating the same thing several times when the properties are processed by sass, making a much smaller file size. That would only matter for deploying an actual website. I'm guessing you wanted to keep it simple for beginners though. :) I mostly watch DevTips now to listen to your jokes haha, and also to observe your thought process as a designer. I hope to see more vlogs soon, they're my favorite! Keep on hacking, Travis!
Thanks David, this is great input. I'm thinking a lot lately about the future of DevTips :)
Maybe you've done this already, but it would be good if you stepped back and asked yourself: What does DevTips look like in 1 year, 5 years, 10 years, 20 years, 50 years (if you're feeling imaginative)? Do you want other people to make videos for DevTips regularly? There's dozens of other good questions to ask yourself around this. When thinking about the future, I find that the path forward is usually lit by deep introspective thinking. :)
You make awesome videos and no one compares to your fun style of teaching , you look really tired take care of yourself man.
Great Sass style for your vids presentation delivery!
Keep the animation series going!!! Keep the animation going !! Lol
got a few more soon :)
Lovely! What a right time to bring up this video :D Thanks travis
Fantastic! Glad it helped :)
thank you for your time! and good tips from Puerto Rico
Thanks, Travis!! Awesome as always
i followed all the steps but still dont get the same output .
can someone upload the html and css file here? TIA
Just when I needed. btw your "123456" was hilarious
Ohhh that's very OPACK :D :D Best line ever
Great video Travis.
This channel is amazing and I have learned a ton from it. Thank you, Travis!
You are welcome Burton!
About Menu2, perhaps you intended that ''bouncing' effect of the items going a little bit past zero. This is achieved using qubic bezier timing function, insead of keyframes. You can use the predefined bourbon timing functions - github.com/thoughtbot/bourbon/blob/master/core/bourbon/library/_timing-functions.scss
This guy's the digital ages Bob Ross. I hope he has pet squirrels.
It's funny how you say "seis" hahahaha
First "opacity", now "seis"? BRUH
Travis amazing episode, thanks a lot that you show basic css and html for me it is very important :)
Good luck.
Oh, you are welcome!! I'm glad it's helpful!!
Pretty amazing! The only problem I see is how can we do it if the amount of submenu > li is dynamic?
Fantastic video. Thanks for the effort and the ideas!
Pretty cool video! Thanks Travis! :)
I didn't know sass was so powerful and a saves time untile i saw that loop there, i had to copy and past my code in vanilla css to recreat what you did with a single loop,
not to self: Learn SASS.
Yeah Travis! You tell Dictionary.com how to pronounce it!
coolio Travis ...!!! #TheBestTravis ...keep posting such awesome videos...learning a lot from you ...:)
Thanks for letting me know Rohan!
Nice Work Man...
Thank you!
Travis you inspire me every time with your videos... Tnx a lot my friend!!
You are welcome. I'm so happy to hear that!
Again, glad to see your lessons!)
Thanks Sten!
I'm big fun of DEV TIPS
Holy crap them animations be dope
Right on Travis! You say opacity however you want man. Don't let the pedants get you down. Or whatever. You do you boo.
HAHAHAH, thanks man :)
That was sick man , Great Work !
Thanks Redhawk!
+DevTips Bless man
+DevTips Need some help I know this might be against the purpose of your present series but can you please do a tut on sprite sheets espeacially creating them from scratch in Adobe illustrator specifically , Many tuts have it in photoshop and i don't use it , I can draw and animate with keyframes I've been successful there in creating the sprite but in terms of targeting the desired IMG this is the struggle for me would like to have better load times and get away from so much individual img's ,So please help me being following you for a while also searched many times through your playlist and channels and nothing on spritesheets. Have a productive day but don't forget my request ok peace.
Thanks again for your time and effort. You're a great help. Awesome teacher!
Ok I just found out about this channel, and I am absolutely amazed of course, my question is, is there any SASS courses made by Travis around? And what other playlists should I watch?
Awesome work bro!
Hey I'm very new to all of this and I was following through the video whenever the list items would not animate individually. I found out that in the CSS, it doesn't have each iteration set up. How can I fix this?
holy shit! that's amazing! thanks for sharing Travis! :)
Good stuff Travis!
I wish you had shown how to animate the hiding part as well since just animating half of it kind of makes it look half done in my opinion.
You could do a transition out. But animations don't animate on mouse-off. You'd have to use JS or something like that.
Ah ok, thanks for the reply!
wow i have only one little problem there...
I can't remove the nav's gray under the items during the animation... why???
Thanks
You are funny and a Good Teacher .Really!!
I would like to know how do u center a horizontal navbar ?
This is a great lesson. Thank you.
Awesome Travis, keep on with these videos, found there great inspiration. :)
Great!! Thanks!!
I tried 15-20 times still couldn't run that animation I don't know where the problem is but what I figured is that animation text in your editor is being detected as white but not in mine... I have no idea why... Any help please...
li:hover > ul.drop-menu.menu-1 li
opacity: 0
animation:
name: menu1
duration: 300ms
timing-function: ease-in-out
@keyframes menu1
0%
opacity: 0
100%
opacity: 1
thank you Traivs is wonderful to watch this video and its very helpful .
You are welcome!
what is the syntax for using @for in normal html editor
i am unable to get this thing working
i really liked this video. Super cool.
This is great. But it would be easier for most people to understand and follow if you had written the CSS3 coding in Notepad or Dreamweaver.
Awesome Video as always Travis :)
Thanks Benni!
"I saay o-paaaaaaack"-Hans Molman.
This is amazing man...
So what if the user is on a mobile device? How do you incorporate the same thing but with using a click event so the drop down menu shows
This man is my computer god
This is css magic! Soooooo cool!
hahah, glad you like it!
Get your own channel if want to say words differently!!! Respect for that...
Great tutorial as always. As for the 'opacity', I think the answer is 'trisyllabic laxing'. en.wikipedia.org/wiki/Trisyllabic_laxing
I think you might be onto something ;)
Hi Travis, I Like it Man. Infect I Like all your videos so, Before i start watching your video I press Like button first. I always talk to my self when i code or design anything. Thank you again for you Awesome Videos.
could someone please provide a comprehensive guide to jade and sass setup and usage with windows?
Read this whole guide css-tricks.com/gulp-for-beginners/
I know this comment is a bit old, but Prepros is a really great preprocessing program with built in jade, haml, sass, scss, less, and more. It has some great features, like automatically compiling jade, sass, etc when the file is saved. Also great for organizing the files easily, and it has some really cool live view settings for most browser.
i copy the html and css compiled code but how to add animation to this please give me answer
thx travis !! u are a great educator
Thanks Mamoun :)
Amazing stuff, as always!
Thanks for the tutorial Trav :-)
(P.s. You look like you might need a bit more sleep, don't get burnt out dood)
Great videos. Thanks for sharing!
Thanks alot again!! this channel really helps me!!
hi.. i need the code for the menu animations for reference...plz do d needful..