Step By Step Form - CSS Animations

[@Ihatetomatoes]

Thanks Trav, love this CSS animations series. Keep it up man.

[@OfficialDevTips]

Thanks tomatoes :)

[@Ihatetomatoes]

Chance haha, I didn't expect you here:)

[@GameOn82]

Hey Trev, thanks for the series! I've been working on a web app, a few months now, and it was cool and all, but after these few videos... now it's AWESOME!!! Keep up the good work, and remember, we can always find a way how to make stuff, but the problem is what to make if you don't have an inspiration... and you have been an inspiration for me!

[@OfficialDevTips]

Awesome, thanks for your comment!!

[@MyShocK]

That last minute of outtakes with you wanting to punch your pc monitor.. love it :D:D ,really good tut Travis, tons of tricks to learn for, thank you a lot!!!!

[@OfficialDevTips]

You are welcome! Thanks for watching the whole thing ::))))

[@noemirozpara4137]

You made my day man! It's really comforting to see, that even the best ones are wasting their lives to found out they forgot display: block :D Also, very helpful video, I have a little problem with switching elements (like sliders) so I fell like I am one step closer to be not noob, thanks! :P

[@xogaminggb2396]

I learned more from your vids than I learned at college and university combined!! Thanks

[@OfficialDevTips]

Damn, I should start charging tuition!

[@xogaminggb2396]

+DevTips yep, your explanation makes much more sense that my tutors. Yes, as my tutor says never do things that you are good in for free. 😀

[@ezkay]

Just had to leave some kind words.. For me you're to most entertaining and at the same time very helpful coder!

[@sriramrajendran4860]

Thank you Travis got a job after learning from your videos

[@nikhilatgur3307]

you are truly an inspiration bro .thanks a lot a great tutor and developer

[@OfficialDevTips]

you are to nice Nikhil, thanks for watching mate :)

[@janjanlawrence]

Can you teach how to add previous button? And can you teach of adding buttons in the pagination?

[@MichaelRichins]

Travis...you always surprise me with your vast knowledge ;) How can anyone know so much! I forked you and added a simple overflow hidden to the HTML tag to prevent scrolling nightmares on smaller viewports.

[@OfficialDevTips]

Good call :)

[@mirkorenerLT]

Did the same with some graphical tweaks :) It's so annoing to see that scroll bar pop in and out XD XD

[@RobbieSherman]

Hey is it possible to see your forked form?

[@MichaelRichins]

Here's mine: codepen.io/MrGrigri/pen/LkoWdj

[@christophehebb1555]

Yet another great video. Thanks Travis!

[@OfficialDevTips]

You are welcome, thanks for watching Christophe :)

[@indowestlife]

Amazingly smooth explanation as if "Bleh, it's nothing; just easy stuff with easy functions and everything in lazy mode waiting for you to write them down and ..." the way you speak too :D It is not at all this easy when I start doin' it by my own such as the "transform origin" thing. How does it even pop up in your mind? I guess experience, duh! But setting it as "top left" and how that'd be as an image gif in your mind. You are like Master Uruguay but umm a cooler form of him with looks of Drake..I dunno, but I got one valuable thing from you which is your attitude. Thanks sir!

[@davejs]

This might have to do with completing the visual design ahead of time but I can see your design skills improving when comparing this series to previous videos. I suspect working with other designers at Google has had an affect on that. It crazy how much just surrounding yourself with talented people can help you improve your skills.

[@OfficialDevTips]

Oh that's interesting! Thanks for pointing that out!!

[@petrossianv1]

Travis you are awesome!! If you have time please make video series of input elements styling and other stuffs.

[@OfficialDevTips]

Thanks for the suggestion :)

[@tarungaur3999]

travis, i have a problem with emmet. i am using emmet with atom that abbreviations work with only ctrl+e and i wants it works with tab

[@VincentAudy]

Pretty awesome to follow your experimentations! Keep it up!

[@nikokosheva]

This is a great video, thanks a lot Travis!

[@OfficialDevTips]

You are welcome! Thanks for watching :)

[@vids6479]

Nice video Travis. I'm going to be in San Fran in early September. Would like to say a quick 'hello' and chat about awesome web stuff!

[@OfficialDevTips]

I roam around mountain view, about an hour or so south of SF. If you come down we can get a drink.

[@mirkorenerLT]

Vids how long are you plannig to stay? Another DevTip meetup would be fun :D I'm planning to come from Turin and visit California in late September :)

[@vids6479]

Thanks mate. I will definitely try and make my way there. Planning to see the company campuses around Palo Alto and Mountain View! Would be good to grab a drink then!

[@vids6479]

mirko rener - I am there only for 5 days. Won't be there in late September unfortunately :( Would have been awesome to be a part of DevTips meetup!

[@mirkorenerLT]

Yeah, it's always great to meet like-minded people :) Don't worry! Take care and have a nice holiday ^_^

[@delarosa9342]

Awesome video! Thank you it open my mind with animations. Which program you use in that video for designing and developing the form?

[@irvingv8]

Hello Trav! I swear I love this intro! made me laugh a lot! Great video. Wanted to ask, are you into angular and that kind of stuff ?

[@mirkorenerLT]

In an other comment he wrote that that comfortable for now in angular :/

[@rosco9awj]

hey Travis. great video. in the future, I would love to see a tut on animating actual form elements from inputs to radios. thanks again

[@OfficialDevTips]

Thanks for the suggestion :)

[@DjSinmson]

Hey Travis, nice video. Ofc you cant transition display: none like you already told in another video, but how about transition the max-height max width? This works fine in the most situations, sometimes I combine it with opacity: 0.

[@mRWiil]

thank you , exists the possibility return the steps ?

[@muhammadhamada1965]

I'm wondering why you are using a span, then give it display: block?

[@mysticsilent]

Thanks Travis. yet again another great video. also your Channel is growing into a nice interative one ;) Keep up the good Stuff!

[@OfficialDevTips]

Thanks Dirk, I appreciate the love!

[@developerfabi]

Can you show how you did this switch from the third video? I like this switch, but I dont know how to make it.

[@rafaelojeda]

Ohhhh baby that is one clean theme!

[@ezekielthemack]

Thanks for your help Travis. Much appreciated.

[@OfficialDevTips]

You are welcome!

[@yeaitsme6834]

Another great video, keep it up Travis!

[@OfficialDevTips]

Thanks Hawk!

[@sudhakarmaddela]

Through ur videos i learned more new things, thank u man

[@OfficialDevTips]

That's a win then!

[@rosykansal9411]

How your html refreshes just on saving the code in text editor. Plz tell it is annoying to again and again refresh the page.

[@fusion5329]

Yeah it's off topic what im about to say but i couldn't find an answer anywhere else, i was just wondering how i can combine the background-color style with background-image in the same element. So for an example i would have a background color of red and an image of a mountain for an example, so they would basically fade in to eachother giving the background image a red feel to it. I would love an answer because i can figure out how to do it myself.

[@MohamedGaberMigaber]

Amazing, You really save my life :D

[@dragosmihai5958]

Could you please make a video on perspective and vanishing points? thx:)

[@OfficialDevTips]

interesting, thanks for the suggestion :)

[@jeiji137]

You are my leader!

[@OfficialDevTips]

I demand more cookies!

[@MoeCodes]

Nice! These videos are very useful & fun to watch. Hi Travis, what screencast/Screen Recording software do u use?

[@Isookov]

Awesome! ps What about the course, when it comes out?

[@madsfaerch]

Hey Trav! Thanks for the videos, I love em. What's your reason for putting units after values of zero in transforms?

[@agatakubiak3543]

in my face! Awesome video Travis :)

[@everestgjonaj]

Hey trav can i put triggers without using jquery but using regular javascript?

[@mirkorenerLT]

Great to see 121 positive and happy comments *_* No trolls and happiness for everybody

[@OfficialDevTips]

Back to normal :)

[@adityapandey4673]

plz make a video related canvas or svg.

[@ourmodernlife1524]

cool .... can you think about something with CMS i mean this forum where it will sort the data ? we to know how to do CMS also as your nice way :)

[@OfficialDevTips]

Thanks for the suggestion :)

[@samwebb3552]

Trav is the man!

[@samwebb3552]

The last minute and 10 seconds reminds me of everyday of my developer life.

[@SayfSentinel]

Travis I'm loving all your videos . they are entertaining lot of humor and you explain complex things very well. I have a suggestion though, could you make a video about taking a PDF and convert it to HTML/ CSS but from complex design and not only boxes here and there, I know you did videos about the topic from PSD to HTML but I did not find complex design you know like a drawing that go from top to bottom which is not possible to reproduce with CSS thanks in advance

[@OfficialDevTips]

Thanks for the suggestion!

[@jigneshmistry1886]

You are awesome brother :) thanks for the all this things.

[@OfficialDevTips]

You are welcome!

[@laracroft5648]

Hey how can i save data from a text input html in a folder

[@evanb3148]

That DevTips commenting spree tho. Thanks, for the vids :D

[@OfficialDevTips]

You are welcome! :D

[@manishadwani386]

this is last time in asking killing it with jquey?? I'm sad

[@yeaitsme6834]

You're going to dissapoint yourself. Travis made it clear he is going to take his time with this series for it to be absolutely perfect, that takes time. Besides, don't the vlogs indicate that he's busy traveling right now? Try putting the effort of bugging him about the release into gathering some tutorials yourself. Travis is not the only one with good knowledge of Jquery.

[@OfficialDevTips]

yea, and I got a batman video game that aint playin it self!

[@yeaitsme6834]

+DevTips Rest and Relaxation. An important rule to being an efficient developer ^^

[@arsum0440]

+DevTips which game

[@siddheshzele9231]

Awesome work. Keep up.

[@lukewykman]

Is jade now Pugjs as I can't seem to find anything about it except on the repo? . The website doesn't work and jade works great still from the cli. Just checking as I see you havent changed to it so I guess I shouldn't either. Why repair a working clock ;)

[@Pstrnil737]

Yes, jade has been renamed pug, more info here: github.com/pugjs/pug/issues/2184

[@desert6120]

Another great video. Thank you Travis. I have a request can you make a video about (CSS3 :checked Selector). For example an image gallery with only pure html and css3. no javascript. thank you ( it would be very helpful if you do it :) )

[@OfficialDevTips]

kzbin.info/www/bejne/mmWzaaZjotCArNU

[@desert6120]

Thanks Travis this really helped me a lot. your the best man...

[@deepjyotibaishya7576]

thanks . Sir, I need a file please how to copy and your project please sir .

[@pawnoffer851]

Thanks for the vid!

[@bartolj.4502]

hey Travis, I am wondering how apple on their website use a pretty cool animation, when scrolling, macbook rotates a bit and opens, how does that work?

[@Ihatetomatoes]

Hey Bartol, can you include URL of the page you are referring to?

[@bartolj.4502]

www.apple.com/hr/macbook/

[@nielskersic328]

+Ihatetomatoes I think he's referring to the animation on the product page for the new MacBook (stupid apple naming schemes). When you scroll down, the laptop opens up

[@Samji3877]

www.apple.com/macbook/ - notice even onload the macbook slides down and opens

[@Ihatetomatoes]

I am not sure which part of the page you are referring to, but most of the animations are done using CSS3 animations. The animations that are happening while you scroll down the page are using JavaScript to animate css transform property, mostly translateY. If you open the animations tab in the Chrome devtools and reload the page you will see the CSS3 animations in action. You can create the javascript scrolling animations using tools like Skrollr or ScrollMagic.

[@nipunparadkar9458]

I love this series! :D

[@OfficialDevTips]

yay!

[@oliverbisley2967]

Great video man, Love this series. You are a great role model for me and I hope one day to be as talented as you! :)

[@tweneboahkoduahemmanuel910]

great work and ya video recording is awesome. what's the secret behind ya recording

[@LostInEchoesFin]

Hasn't Jade now become Pug?

[@SamuelAltarac]

Hi Travis. Your videos are fantastic. I've been a fan since you started. I'm interested in putting form data into a MySQL database. I've been doing that with php but I would like to know if it's possible to do it through JavaScript alone. In fact, my question is how can I interact with my database using JavaScript? If you know if a good resource, would you please point me to it (or preferably would you make a tutorial - you are a very good teacher). Thank you!!

[@OfficialDevTips]

That's not really my forté, but there is a comment on this video, someone re-wrote this pen to do just that.

[@davidevico]

You could do that using jQuery. Look up $.ajax() here: api.jquery.com/jquery.ajax/ As for the form data check out this tutorial on scotch.io: scotch.io/tutorials/submitting-ajax-forms-with-jquery

[@davidevico]

If you needed also the backend in JavaScript then Node.js or Express could be ways to go. Check this StackOverfllow post about the topic: stackoverflow.com/questions/5818312/mysql-with-node-js

[@SamuelAltarac]

+Davide Vico thanks Davide.

Could you create a video using angular, developing a crud!!!

[@OfficialDevTips]

Sorry, I don't know angular.

[@Wiejeben]

Felt like rebuilding it in VueJS :-) codepen.io/Wiejeben/pen/mEYAmx it also collects the data now, which you could send to a server via AJAX. The button is now actually a button type="submit" so you can simply press enter to go to the next page. I had to do some funky stuff with the transitions because it has to animate in and out differently depending on if it's the last or first slide.

[@OfficialDevTips]

Hottness. Thanks!

[@topalek]

Trav, u da man !!! tnx!!!

[@OfficialDevTips]

Thanks for watching!

[@pacificusfacio6013]

Your are the best Waiting next video

[@OfficialDevTips]

Monday :)

[@noureddinear3384]

like the intro

[@davidevico]

I changed all the animations :) check out my pen: codepen.io/masterdave/pen/BzZzPJ?editors=1100

[@OfficialDevTips]

That fold tho... SEKSY!

[@mbuzogan]

broken in firefox ;) but nice idea

[@davidevico]

+Michal Buzogan I should add some prefix then. Thanks for the heads up :)

[@CodeHow]

Thanks!

[@flvyu]

why does that html look like that

[@n4botz]

Trav uses jade. Jade is a node.js based template-engine or short a Preprocessor for HTML. The syntax is similar to Sass. At least a bit. regards from Germany, Patrick.

[@flvyu]

What are the pros of jade, should i start to use it?

[@carlneilson700]

Thanks for great vid

[@OfficialDevTips]

You are super welcome!

[@gfgddtr6217]

where is validation old beard?))

[@sonlakinhdoanh88]

Good . Thanks you

[@Samji3877]

As if you've done Forms this week! - I'm trying to create one for my website! #youreadmymind

[@OfficialDevTips]

that's a win!

[@Samji3877]

We love you Travis!

[@Samji3877]

You disobeyed the 12 Basic Principles of Animation!! haha..

[@xogaminggb2396]

one day I want to be that good...

[@OfficialDevTips]

Keep at it, you'll be better in no time.

[@xogaminggb2396]

+DevTips to be honest I had no idea that CSS is that powerful and is able to do such things!! Cheers 😀

[@gautamhans1]

Hi Travis, I have a friend who looks exactly like you. :D

[@OfficialDevTips]

Is he evil?

[@daveskye]

Nice! I think this will work nicely for one of my projects! ¬¬ Steal!

[@OfficialDevTips]

Link when you are done!

[@MilanB]

I want to play a game! :D

[@OfficialDevTips]

What's your answer? I'd take 10 lives.

[@MilanB]

Well, since there's no other choice, i'd take 10 lives, too. It is off topic but what are your thoughts on developing VR based websites with A-frame? :)

[@SayfSentinel]

I read my comment and it's not PDF but PSD sorry

[@OfficialDevTips]

oh, haha! I was like. Well, that's pretty unusual, but okay!

[@EliseoMartelli]

Are your videos CSS porn or what? 😂😂😂 We want a bonus video of the 6 minutes of problem solving ✌️

[@OfficialDevTips]

its just 6 minutes of a blank stare on my face. I did, however, cut all my mumblings together and put them at the end of the video.

[@EliseoMartelli]

+DevTips Good 😂😂😂

[@timeoschmidt2113]

Your videos are way too long - yet interesting.

[@OfficialDevTips]

I was never good with brevity. Personal flaw.

[@johnc8327]

I think you fucked up. Your suppose to grow hair on your head and shave your face, but you grew hair on your face and shaved your head.

[@Alphfirm]

aaaand I don't understand shit