Animating the Moments - Using Animation in UX (CSS Animations Series Part 3)

[@SimPwear84]

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.

[@el9attous]

How much time did you practice before having the job ?

[@SimPwear84]

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.

[@Ihatetomatoes]

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!

[@OfficialDevTips]

Glad you liked it!!

[@ricardo_h]

My 2 favorite teachers in one place! Thank you both for publishing tutorials!!

[@Ihatetomatoes]

Ricardo Hormaza thanks Ricardo!

[@christopherberrios2694]

I was just going to say the same thing Ricardo! Thank you both!

[@m081779]

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!

[@OfficialDevTips]

Thanks Marco, that's great to hear!!

[@Crummyj0e]

I dont think I've ever appreciated 60fps more until this video. It actually looks amazing. You're like the Bob Ross of coding

[@willb.755]

Its so fun to watch the production quality of Dev Tips grow. This video looks so good in so many ways!

[@OfficialDevTips]

That's great will, thanks for that comment :)

[@Emadmohamad]

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 !

[@OfficialDevTips]

Thanks Emad!

[@ConquerJS]

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!

[@HowdyhoNet]

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.

[@devensky00]

Travis, you rock. Best tutorials ever! I really appreciate the fact that you care about the user experience. Thank you very much for everything.

[@OfficialDevTips]

You are very welcome. Thanks for watching!

[@julezandreipizarro9547]

Torevis

[@ferhoba]

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.

[@OfficialDevTips]

Thanks mate!

[@ferhoba]

You very welcome ;-)

[@brendanbax1952]

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!

[@OfficialDevTips]

So beard, thanks for watching :)

[@julianpinzoneslava]

I think this is one of the best non-coding videos I've seen you do! Great stuff!

[@OfficialDevTips]

Thanks Julián!

[@NomadeDigital]

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

[@PatrickToepel]

Hands down on of the best CSS instructors ever. Come back man!

[@steviejhuh9175]

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?

[@normandubois_design]

Awesome video! Thanks Travis! I love the way you talk more about the ux part! :)

[@OfficialDevTips]

Thanks for your comment. I think I might do more UX training, based on these responses.

[@normandubois_design]

+DevTips yaay, would love to learn from you! :)

[@normandubois_design]

Maybe you could do a video on how to animate page transitions? Would be pretty cool! :)

[@masterwizardcaptain]

Superb video! I love how clean and minimal you make your animations as well!

[@premiothemes1165]

Thank you for sharing Travis! Animations are a crucial component of contemporary UX design, happy to see this from you.

[@OfficialDevTips]

You are welcome Premio, I'm really glad you liked it :)

[@drake8204]

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!

[@utkarshuday1626]

Changed my perspective about web designing. Animation can really let user understand what's going on. Thanks

[@Knards]

Did you get a new Camera? The clarity and visible detail of this video is stunning.

[@OfficialDevTips]

I've used this camera before. But I've been putting it to 30fps. I think I forgot and left it on 60 today :)

[@PaDamTuts]

He was using it since CodeKit giveaway.

[@asencme]

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!

[@OfficialDevTips]

Fantastic, thanks for checking out the pen :)

[@richardrichardson5745]

Your videos give me a new or even better approach to web design. so glad i am a subscriber.

[@Mirza514]

totally agree

[@chris.scott510]

WHAT HE SAID

[@nextgen8888]

Couldn't have said it better.

[@everestgjonaj]

One of the few positive people i see on my whole day.I really like your channel . keep it up

[@Jc199somethin]

You've grown so much :D (professionally and beardfully). I love your videos man, getting more insightful every time!

[@OfficialDevTips]

Thank you. That's very nice to say :)

[@dishagupta7446]

The way he says 'oh it's going to be good' on visual feedback shows how much he loves coding❤️

[@bokibogi]

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/

[@francomussocom]

Amazing video with concrete examples. Principles were very clearly and thoughtfully expressed. Thanks!

[@ratixyz]

This was so good man! Loved the examples!

[@OfficialDevTips]

Thanks Ratik :)

[@felipedallagnolo]

Nice, bro. Great insights about UX. The camera setup is amazing! Thank You.

[@OfficialDevTips]

Thanks Felipe :)

[@8Trails50]

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.

[@Casey_W]

Aomine o

[@maciejzadrozny8504]

I just find you on youtube and just love your videos and humor. Take my subscribe, sir!

[@cassioscabral]

This kind of video or anti-patterns are the best. You can learn a lot by seeing real use. Thanks

[@pankajbhandarkar6841]

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.

[@OfficialDevTips]

You are welcome, thanks for watching!

[@TheMalni]

I never thought of animations this way, thanks for educating me Travis, so that my future projects can be more thought through ;)

[@OfficialDevTips]

My favorite comment so far :)

[@VishalShukla]

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

[@115599884422]

Man, this was one of the best episode i have seen in the last weeks. nice job. #keepOnHacking

[@OfficialDevTips]

Glad you liked it!!

[@DeepakRai-tf8un]

MISS YOU TRAVIS .. JULY 2019 YOU ARE MY BEST GURU ... 😥😥😥

[@bennis9283]

Yay i am waiting for this the whole week. Thanks Travis

[@OfficialDevTips]

You are welcome Bennis

[@sea-lucky7143]

Thanks man. You're making a very big deal! I'm waiting for the continuation!

[@OfficialDevTips]

Tanks sea-lucky, I make a new video every Monday :)

[@sea-lucky7143]

It's greate, I watching all video about animation, js. You cool!

[@LouistitiFr]

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

[@OfficialDevTips]

Thanks for watching. I'm glad this all made sense to you :)

[@topknotclare456]

Your content provides such value! Thank you, seriously. I admire your work a lot.

[@lotharingia3585]

Awesome stuff. Hoping we'll get more stuff related to UI/UX!

[@OfficialDevTips]

Yea, it seems yall really liked this one :)

[@YairMishnayot]

This is one of the most helpful videos so far. thank you for this!

[@ameerbacchus9660]

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

[@OfficialDevTips]

Haha, I know that feel. Hand is in the air, waiting..

[@dishagupta7446]

Loving this series

[@danialcalamund1371]

Great video as the other two. I just missed those kind of tips saying where/when NOT to animate!

[@senhorsulaiman5341]

Great! Have come up with the information that I were always stuck . Thanks .

[@isunas16]

Amazing tips as always.Thank u so much Travis

[@ginoskotheon3]

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?

[@OfficialDevTips]

Simple, always simple.

[@captainobvious413]

But why does the WHITE bar moves at 13:40? Is that intentional?

[@OfficialDevTips]

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

[@BippyMiester]

I saw this as well. I thought that was intentional. Looked kind of cool IMHO.

[@FaizanPinjari]

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.

[@IOnlyFilmBangers]

this video is sweet. Will you ever go over the orientation example? Maybe how to add more slides to it?

[@OfficialDevTips]

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?

[@IOnlyFilmBangers]

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!

[@JuanMoisesTorrijos]

Extraordinary Work. Thank you for the time you put in this videos.

[@007AhmedNoor]

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

[@kpplrfv5578]

Your's tutorials are just the best! Thx for sharing all this with us! :DD

[@chfourleung]

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?

[@29LCWeeze]

You teach me so much... inspired, love your videos

[@corentinvzc]

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.

[@skpalardin]

Hey Travis , So iv'e been going through your tutorials and it has been very very informative but there is a problem when ever here is a click involved . it doesn't animate. Even in the codepen link or the previous tutorials. Is it a problem in the conversion from jade to html ? Please help . (p.s A newbie to web dev) .

[@ahmedam77]

One of a kind Video many thanks for your time and efforts

[@Bodyskillz2011]

animation is life ! keep it up sensei !

[@gareth_3d]

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.

[@jeiji137]

I love your spirit at 12:34 :)

[@OfficialDevTips]

Haha, Thanks!!

[@carlojacobs7722]

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!

[@beatrepreneur]

Thank you for your videos Ive been watching and learning from your videos.

[@mahmoudzakria6946]

very nice one travis keep it up Dude!

[@neeksandhu1798]

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

[@calvinogood]

Thanks Travis!

[@TLCSlAssassinl]

What camera are you shooting with? Great video btw

[@Waqas4hmed]

Now everything on DevTips is getting serious! I wonder when travis releases a video about SVG hahaha. Way too serious :D

[@vikalp-panseriya]

Hello .. I loved it very much ur design .. can you please give me that code which is used to represent ...?

[@haili903]

thanks so much for these great tutorial!!!! please please upload more

[@arthurbouabeyivaza60]

Sir!you re a monster of IT,and UI thumbs UP!

[@the_awakening_msaha5132]

Your ideas are awesome............................

[@circulardep]

This was amazing. It's so sad that he stopped uploading these types of videos :(

[@linodXD]

Where can i find this color pallete?

[@angelusherath1921]

Thank you for this awesome video!! Hope you make more :)

[@ocanodiego]

Beautiful video!!!

[@WalterMiani]

Very neat! Good video.

[@FirstPrincipleAlex]

Nice vid! I'd like to see more UX stuff an your channel ;)

[@OfficialDevTips]

Thanks! judging from the response, we might see more ux soon :)

[@NBKMAXINE]

Great job! As always!

[@OfficialDevTips]

Thanks NBK!

[@matankoriat3775]

Travis I exciting from your videos every time! Tnx for sharing it with us :)

[@OfficialDevTips]

You are welcome! Thanks for watching!

[@NoHandle690]

Liked it before watching man:)

[@emmanuel4699]

Thank You. Learnt a lot, and got ideas.

[@OfficialDevTips]

That's great!

[@manishadwani386]

great and amazing video always Travis BTW what about Killing It With JQuery

[@OfficialDevTips]

Thanks Manish. I'm currently deciding its fate...

[@sanchitbhardwaj7051]

where could I found orientation coding man?

[@shannonmyers4972]

Loved the video, I might use a bit of animation in the website I'm going to make for my robotics team. Also, I'm thinking about becoming a patreon!

[@OfficialDevTips]

Hope your site turns out well. We'd love to have you as a patron :)

[@uilifecteau4841]

New camera Travis? Nice :)

[@OfficialDevTips]

I've had it a while, but today i left it on 60fps mode. That's why it looks so crisp

[@pedrosanchez4201]

You are my sensei man!

[@CrossingTech]

Hi Travis. Can you please make a video on how you did these animation? I think it would be great. Thanks

[@OfficialDevTips]

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.

[@CrossingTech]

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

[@KaasFlipGames]

Could you make a video on how to code all this. I know it is much to explain, but it would be super awesome!

[@OfficialDevTips]

You can check out the codepen in the comments to see how everything works.

[@KaasFlipGames]

+DevTips ok. I'll check it out!

[@720SouthCalifornia]

Funny for me the email animation makes it look like the window is being dismissed, not sent. For me sent would be going off the screen toward the right. Perhaps from my experiences using video game drop-down consoles and guake..

[@shamy673]

Sir I'm having some problems in using the javascript because i'm using brackets editors

[@fredson6083]

Dang man, you're doing a great job explaining these concepts. If I were a millionaire, I would have donated to for more contents on web design. When do we attack responsive design?

[@Tavo-Entertainment]

great job!

[@aadhargaur]

Please Sir help me to design a form with some basic elements form design should be simple yet different with all elements I.e. dropdown , check box, radio button.

[@deserteagleto2780]

DevTips rock.

[@azeddinechenine8441]

i like your working style , keep it up ):

[@OfficialDevTips]

Thanks Azeddine :)

[@fvgoya]

I don't know how to explain this so well in English but, is really interesting to see and to give the user this kind of "real life feeling". Do you know what I a mean? I know that is the purpose of UX but, see this "real life feeling" in action in a digital environment is so awesome. Is a back to "life" but still in a digital world... Complex to explain... kkkkk

[@OfficialDevTips]

I get it. Thanks for your comment!