I come from a print background but started watching your videos last year, got hooked and kept learning. I am now working as a Front-end developer.. thanks a million Travis. I owe it all to you.
8 months HTML + CSS and basic JS. But I started creating e-mailers and Landing Pages at my job before getting into advanced Apps and working with API's.
This is my new favorite channel. You have no idea how much you are is helping me. I look forward to every video you post. Keep up the work man, you are consistently awesome!
Great episode Trev, it is really important to know why to animate instead of just animating for the sake of it. Very useful breakdown even for someone like me who has some experience with animations. Keep it up!
High-quality content. You almost never fail to deliver such high standards! Respect to every minute you spend to perfect these videos. Thank you, Travis !
Congrats Mr. Travis. That's it!!! You have made a point of animation, WHY, WHEN & WHERE. From my point of view this is one of Your best videos on DevTips. Good luck in the future with this project.
Travis your beard is so HD. I love the expanding content trigger, it's like having a layout within the layout. Thanks for explaining the "why" in another awesome video!
I was almost done working on a website for a client but after watching this I'm going to go back to consider everything mentioned in here. Proud to be a Patron for this course!
This has got to be one of the best Devtips videos so far! The excitement for the topic just shines through. Thanks Travis! -- Also have you considered writing a book?
I love this type of videos where we stop and think about why instead of how. Same goes for the videos on wireframing you did. I'd love to see a video about trends in webdesign, what's in and what's out, what you think is a step forward etc...
Just went trough the code and I love the way you've made everything! I was able to fully understand it and it's quite easy. I also learned a trick or two from it. Definitely saving this pen for myself!
Telegram implemented very cool combination of spinner & progress bar system status, durning the file uploading/downloading. It's like, white circle line fills up to full circle from dot, while spinning.
ToC: 02:25 **Orientation . Where am I now? 05:27 **Functional Change. What does this element do now? 07:09 **New Element. What should I look at? 09:21 **Highlight. What is important here? 11:23 **Visual Feedback. Is this layout understanding what am I asking it to do? 13:00 **System Status. Is this working? How long will it take? 15:47 WHAT IT TIES IT ALL TOGETHER? /no spoilers here/
Nice Video, I like the way of presenting the content with detailed and simple example. Now-days animation is very important for better user experience. Thanks for this Video.
Occasionally you interact with someone and you have a pleasant opinion about them as a person, and then all of a sudden they do or say something and then they elevate quickly in to your ranks as 'awesome, we could be best friends.' I caught the Goofy Movie / Tevin Campbell reference and am now looking up tickets to fly across the country and deliver you a high five. Cheddar....
so thankful for this series on animation. animation on the web has always been confusing for me, which is sad because its also what stands out the most to me in pretty web pages.
after watching ths very first tutorial of your channel u made me to hit subscribe button!! awesome tutorial . I like the way u teach. I hope u will bring more awesome tuts like this!!
Very interesting topic! That clearly explain we should not do animations just to do animations, there are several reasons behind. The "Visual Feedback" case is relative to the material concept and demonstrate thanks to the "slide-up" animation that for example the input has been sent. Keep on hacking. :)
These are all great tips on when it's appropriate to use a certain animation! I wonder if you've ever stumbled across a website that uses too many animations. Is there such a thing as animation overkill?
Dear Travis, first of all, I absolutely love your work! Your coding videos have helped me sooooo much and I love listening to #lateNights! There is just so much VALUE! in your work ;) But lets get to my question; I always hear you talking about "the devtips community" but what is that exactly? I heard you and Los talking about a slack channel on the podcast (which I listen to every week;). Anyways, I'd love to know! And I'd love to join!
I think that all of these things orient the user. for example, if an alert animates in, it orients the user to a few questions: - what just happened? - what is this related to? - is this temporary? - what do I do now?
Definitely, I meant going over the first example in codepen. Like the css and why you used the properties you did. I'd appriciate any resources that could help with similar transitions for forms. The rotation is great for showing progress, I'm just confused on how to add more "screens" to the first example. Thanks!
hey travis. sorry for putting this question here since it is irrelevent to the topic and plz tell me if i have to ask u a question where should i ask? or not to :P Question is that i am a novice in css frameworks and have only tried bootstrap or say just its grid. I noticed that each frame work has its own set of default styles for buttons forms navbars fonts etc. what if i want to make a unique site for every other project now and then. i saw the bootstrap themes(the bootstrap theme css file not bootstrap made html/css templates) and there arent many. so would i have to add my custom styles for the components i like to design uniquely for each project or there are options in bootstrap or any other framework that provide the functionality to custom design each site? and if not then should i use the grid only and made my own css ui kit for each project or use complete package and modify it? many many thanks :)
Hi travis, Hope you had a great week. I'm a young student in design but i have a problem i have ideas but i never manage to put my ideas on photoshop or illustrator. What should i do ? Thanks for your awesome work.
Love this kind of tutorial. Question, in the context of a Web page, is a simple animation best? Or some kind of transformer thingy better if I can figure out how to code it? I'm thinking it depends, but do you follow a rule of thumb?
I'd love your opinion on right click pie menus, this has been screwing me for a long time. Although they are not a new concept, I wonder why they are not used often on the web despite their obvious benefits like short distance travel + muscle memory = instant action. Thanks
I just found out that CSS can do 3d transform effects with matrix3d(). I was inspecting a site that had particles floating around to find out how they do it and turns out its just css lol. I'm still new so I'm amazed that css, despite being seemingly so basic, can do some pretty crazy stuff.
Hey Travis that's good. Buddy I want to learn the concept of designing such interactive element for using that is web applications. How should i do it ? like a Price range handler in ecommerce websites or some other beautiful elements like checkbox, Radios, etc any library / framework for creating such interactive elements ?? Thank you.
I come from a print background but started watching your videos last year, got hooked and kept learning. I am now working as a Front-end developer.. thanks a million Travis. I owe it all to you.
How much time did you practice before having the job ?
8 months HTML + CSS and basic JS. But I started creating e-mailers and Landing Pages at my job before getting into advanced Apps and working with API's.
This is my new favorite channel. You have no idea how much you are is helping me. I look forward to every video you post. Keep up the work man, you are consistently awesome!
Thanks Marco, that's great to hear!!
Great episode Trev, it is really important to know why to animate instead of just animating for the sake of it. Very useful breakdown even for someone like me who has some experience with animations. Keep it up!
Glad you liked it!!
My 2 favorite teachers in one place! Thank you both for publishing tutorials!!
Ricardo Hormaza thanks Ricardo!
I was just going to say the same thing Ricardo! Thank you both!
High-quality content. You almost never fail to deliver such high standards! Respect to every minute you spend to perfect
these videos. Thank you, Travis
!
Thanks Emad!
Travis, you rock. Best tutorials ever!
I really appreciate the fact that you care about the user experience.
Thank you very much for everything.
You are very welcome. Thanks for watching!
Torevis
Congrats Mr. Travis. That's it!!! You have made a point of animation, WHY, WHEN & WHERE. From my point of view this is one of Your best videos on DevTips. Good luck in the future with this project.
Thanks mate!
You very welcome ;-)
Its so fun to watch the production quality of Dev Tips grow. This video looks so good in so many ways!
That's great will, thanks for that comment :)
I dont think I've ever appreciated 60fps more until this video. It actually looks amazing. You're like the Bob Ross of coding
Travis your beard is so HD. I love the expanding content trigger, it's like having a layout within the layout. Thanks for explaining the "why" in another awesome video!
So beard, thanks for watching :)
I think this is one of the best non-coding videos I've seen you do! Great stuff!
Thanks Julián!
Hands down on of the best CSS instructors ever. Come back man!
Your videos give me a new or even better approach to web design. so glad i am a subscriber.
totally agree
WHAT HE SAID
Couldn't have said it better.
Awesome video! Thanks Travis! I love the way you talk more about the ux part! :)
Thanks for your comment. I think I might do more UX training, based on these responses.
+DevTips yaay, would love to learn from you! :)
Maybe you could do a video on how to animate page transitions? Would be pretty cool! :)
Thank you for sharing Travis! Animations are a crucial component of contemporary UX design, happy to see this from you.
You are welcome Premio, I'm really glad you liked it :)
Did you get a new Camera? The clarity and visible detail of this video is stunning.
I've used this camera before. But I've been putting it to 30fps. I think I forgot and left it on 60 today :)
He was using it since CodeKit giveaway.
I was almost done working on a website for a client but after watching this I'm going to go back to consider everything mentioned in here. Proud to be a Patron for this course!
I've watched so many videos of you now .. man .. i really have to give you a thank you so much for your hard work. I really appreachiate your work!
One of the few positive people i see on my whole day.I really like your channel . keep it up
This has got to be one of the best Devtips videos so far! The excitement for the topic just shines through. Thanks Travis! -- Also have you considered writing a book?
You've grown so much :D (professionally and beardfully). I love your videos man, getting more insightful every time!
Thank you. That's very nice to say :)
Superb video! I love how clean and minimal you make your animations as well!
Changed my perspective about web designing. Animation can really let user understand what's going on. Thanks
I love this type of videos where we stop and think about why instead of how. Same goes for the videos on wireframing you did. I'd love to see a video about trends in webdesign, what's in and what's out, what you think is a step forward etc...
The way he says 'oh it's going to be good' on visual feedback shows how much he loves coding❤️
Amazing video with concrete examples. Principles were very clearly and thoughtfully expressed. Thanks!
This was so good man! Loved the examples!
Thanks Ratik :)
Just went trough the code and I love the way you've made everything! I was able to fully understand it and it's quite easy. I also learned a trick or two from it. Definitely saving this pen for myself!
Fantastic, thanks for checking out the pen :)
Telegram implemented very cool combination of spinner & progress bar system status, durning the file uploading/downloading.
It's like, white circle line fills up to full circle from dot, while spinning.
MISS YOU TRAVIS .. JULY 2019 YOU ARE MY BEST GURU ... 😥😥😥
This kind of video or anti-patterns are the best. You can learn a lot by seeing real use. Thanks
I just find you on youtube and just love your videos and humor. Take my subscribe, sir!
Yay i am waiting for this the whole week.
Thanks Travis
You are welcome Bennis
Nice, bro.
Great insights about UX.
The camera setup is amazing!
Thank You.
Thanks Felipe :)
Loving this series
This is one of the most helpful videos so far. thank you for this!
ToC:
02:25 **Orientation . Where am I now?
05:27 **Functional Change. What does this element do now?
07:09 **New Element. What should I look at?
09:21 **Highlight. What is important here?
11:23 **Visual Feedback. Is this layout understanding what am I asking it to do?
13:00 **System Status. Is this working? How long will it take?
15:47 WHAT IT TIES IT ALL TOGETHER? /no spoilers here/
Your content provides such value! Thank you, seriously. I admire your work a lot.
Extraordinary Work. Thank you for the time you put in this videos.
Thanks man. You're making a very big deal! I'm waiting for the continuation!
Tanks sea-lucky, I make a new video every Monday :)
It's greate, I watching all video about animation, js. You cool!
Man, this was one of the best episode i have seen in the last weeks. nice job. #keepOnHacking
Glad you liked it!!
Amazing tips as always.Thank u so much Travis
I love your spirit at 12:34 :)
Haha, Thanks!!
You teach me so much... inspired, love your videos
Nice Video, I like the way of presenting the content with detailed and simple example. Now-days animation is very important for better user experience.
Thanks for this Video.
You are welcome, thanks for watching!
Awesome stuff. Hoping we'll get more stuff related to UI/UX!
Yea, it seems yall really liked this one :)
Occasionally you interact with someone and you have a pleasant opinion about them as a person, and then all of a sudden they do or say something and then they elevate quickly in to your ranks as 'awesome, we could be best friends.' I caught the Goofy Movie / Tevin Campbell reference and am now looking up tickets to fly across the country and deliver you a high five. Cheddar....
Haha, I know that feel. Hand is in the air, waiting..
so thankful for this series on animation. animation on the web has always been confusing for me, which is sad because its also what stands out the most to me in pretty web pages.
Aomine o
after watching ths very first tutorial of your channel u made me to hit subscribe button!! awesome tutorial . I like the way u teach. I hope u will bring more awesome tuts like this!!
I never thought of animations this way, thanks for educating me Travis, so that my future projects can be more thought through ;)
My favorite comment so far :)
Your's tutorials are just the best! Thx for sharing all this with us! :DD
animation is life ! keep it up sensei !
Great! Have come up with the information that I were always stuck . Thanks .
One of a kind Video
many thanks for your time and efforts
You are my sensei man!
Thanks Travis!
thanks so much for these great tutorial!!!! please please upload more
Very interesting topic! That clearly explain we should not do animations just to do animations, there are several reasons behind.
The "Visual Feedback" case is relative to the material concept and demonstrate thanks to the "slide-up" animation that for example the input has been sent. Keep on hacking. :)
Thanks for watching. I'm glad this all made sense to you :)
Sir!you re a monster of IT,and UI thumbs UP!
Thank you for your videos Ive been watching and learning from your videos.
Your ideas are awesome............................
What camera are you shooting with? Great video btw
Beautiful video!!!
thank you DevTips Great Knowledge
You are welcome!
These are all great tips on when it's appropriate to use a certain animation! I wonder if you've ever stumbled across a website that uses too many animations. Is there such a thing as animation overkill?
Dear Travis, first of all, I absolutely love your work! Your coding videos have helped me sooooo much and I love listening to #lateNights! There is just so much VALUE! in your work ;) But lets get to my question; I always hear you talking about "the devtips community" but what is that exactly? I heard you and Los talking about a slack channel on the podcast (which I listen to every week;). Anyways, I'd love to know! And I'd love to join!
Thank You. Learnt a lot, and got ideas.
That's great!
Very neat! Good video.
very nice one travis keep it up Dude!
Liked it before watching man:)
Travis I exciting from your videos every time!
Tnx for sharing it with us :)
You are welcome! Thanks for watching!
Thank you for this awesome video!! Hope you make more :)
Great job! As always!
Thanks NBK!
thanks man! you're a great teacher.
Great video as the other two. I just missed those kind of tips saying where/when NOT to animate!
Very insightful. Thank you.
You are welcome!!
But why does the WHITE bar moves at 13:40? Is that intentional?
Woah. I never noticed that... It's not like that on the codepen. I wonder what's going on there: codepen.io/devtips/pen/AXxGwO
I saw this as well. I thought that was intentional. Looked kind of cool IMHO.
This was amazing. It's so sad that he stopped uploading these types of videos :(
this video is sweet. Will you ever go over the orientation example? Maybe how to add more slides to it?
I think that all of these things orient the user. for example, if an alert animates in, it orients the user to a few questions:
- what just happened?
- what is this related to?
- is this temporary?
- what do I do now?
Definitely, I meant going over the first example in codepen. Like the css and why you used the properties you did. I'd appriciate any resources that could help with similar transitions for forms. The rotation is great for showing progress, I'm just confused on how to add more "screens" to the first example. Thanks!
Nice vid! I'd like to see more UX stuff an your channel ;)
Thanks! judging from the response, we might see more ux soon :)
DevTips rock.
hey travis. sorry for putting this question here since it is irrelevent to the topic and plz tell me if i have to ask u a question where should i ask? or not to :P
Question is that i am a novice in css frameworks and have only tried bootstrap or say just its grid. I noticed that each frame work has its own set of default styles for buttons forms navbars fonts etc. what if i want to make a unique site for every other project now and then. i saw the bootstrap themes(the bootstrap theme css file not bootstrap made html/css templates) and there arent many. so would i have to add my custom styles for the components i like to design uniquely for each project or there are options in bootstrap or any other framework that provide the functionality to custom design each site? and if not then should i use the grid only and made my own css ui kit for each project or use complete package and modify it? many many thanks :)
thanks for sharing! You're awesome!
Hi travis, Hope you had a great week. I'm a young student in design but i have a problem i have ideas but i never manage to put my ideas on photoshop or illustrator. What should i do ? Thanks for your awesome work.
great job!
Love this kind of tutorial. Question, in the context of a Web page, is a simple animation best? Or some kind of transformer thingy better if I can figure out how to code it? I'm thinking it depends, but do you follow a rule of thumb?
Simple, always simple.
Where can i find this color pallete?
Hi Travis. Can you please make a video on how you did these animation? I think it would be great. Thanks
I'll be making these kinds of videos for the next few weeks. make sure to check out the code on that codepen in the meantime to get some ideas.
+DevTips Thank you so much for that. I really love the way you describe each and everything. Here is a big fan of you from Pakistan. :)
New camera Travis? Nice :)
I've had it a while, but today i left it on 60fps mode. That's why it looks so crisp
Great! ⭐️ ⭐️ ⭐️ ⭐️ ⭐️ 5/5
You are amazing!
Now everything on DevTips is getting serious! I wonder when travis releases a video about SVG hahaha. Way too serious :D
Typical engineer, having a rollercoaster of emotions over a loading bar. :D
Hahaha I'm glad to hear its typical. That was embarrassing :)
I'd love your opinion on right click pie menus, this has been screwing me for a long time. Although they are not a new concept, I wonder why they are not used often on the web despite their obvious benefits like short distance travel + muscle memory = instant action. Thanks
The quality in this video. Damn.
I just found out that CSS can do 3d transform effects with matrix3d(). I was inspecting a site that had particles floating around to find out how they do it and turns out its just css lol. I'm still new so I'm amazed that css, despite being seemingly so basic, can do some pretty crazy stuff.
it was awesome!!! thanks
Hello .. I loved it very much ur design .. can you please give me that code which is used to represent ...?
Could you make a video on how to code all this. I know it is much to explain, but it would be super awesome!
You can check out the codepen in the comments to see how everything works.
+DevTips ok. I'll check it out!
Hey Travis that's good. Buddy I want to learn the concept of designing such interactive element for using that is web applications. How should i do it ? like a Price range handler in ecommerce websites or some other beautiful elements like checkbox, Radios, etc any library / framework for creating such interactive elements ??
Thank you.
i like your working style , keep it up ):
Thanks Azeddine :)