HomeОбразованиеRelated VideosMore From: DevTips

Step By Step Form — CSS Animations

1477 ratings | 77501 views
Today we are going to use animations to help our user pace themselves through this web form. Check out the CodePen: http://codepen.io/devtips/pen/zBXWZG/ - - - This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips Listen to Travis' Podcast - http://www.travandlos.com/ Get awesomeness emailed to you every thursday - http://travisneilson.com/notes You should follow DevTips on Twitter - https://twitter.com/DevTipsShow
Html code for embedding videos on your blog
Text Comments (212)
William Larreal (8 days ago)
thank you , exists the possibility return the steps ?
Dergot Kaiser (4 months ago)
Hello, I enjoy your videos a lot. Here is my fork of your code and an animation I added in. It basically adds a hinge swing like effect while fading away. Check it out (https://codepen.io/brff19/pen/GBOgKd?editors=1101)
Rosy Kansal (5 months ago)
How your html refreshes just on saving the code in text editor. Plz tell it is annoying to again and again refresh the page.
Kieran Holroyd (7 months ago)
Gfgd Dtr (8 months ago)
where is validation old beard?))
akash (8 months ago)
What ishould i use bootstrap or css grid ????
Siddhesh Zele (1 year ago)
Awesome work. Keep up.
Deepjyoti Baishya (1 year ago)
thanks . Sir, I need a file please how to copy and your project please sir .
John C (1 year ago)
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.
Rafael Ojeda (1 year ago)
Ohhhh baby that is one clean theme!
developerfabi (1 year ago)
Can you show how you did this switch from the third video? I like this switch, but I dont know how to make it.
Pawn Offer (1 year ago)
Thanks for the vid!
Branko Toshin (1 year ago)
I've created a fork with updated javascript, animationend event is used so you dont have to use setTimeout and its a little more dynamic, you can have as much steps as you want without updating the javascript. Pen: http://codepen.io/anon/pen/zNEBby Awesome video!
ur mum gay (1 year ago)
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.
Lawrence (2 years ago)
Can you teach how to add previous button? And can you teach of adding buttons in the pagination?
Lavinia Umeiniuc (2 years ago)
Hey how can i save data from a text input html in a folder
Everest Ev10 (2 years ago)
Hey trav can i put triggers without using jquery but using regular javascript?
great work and ya video recording is awesome. what's the secret behind ya recording
exenreco bell (2 years ago)
better late than never... https://codepen.io/exenreco19/full/YGWadw
exenreco bell (1 year ago)
Bill Beasley yep
Bill Beasley (1 year ago)
exenreco bell
Moe Codes (2 years ago)
Nice! These videos are very useful & fun to watch. Hi Travis, what screencast/Screen Recording software do u use?
sriram rajendran (2 years ago)
Thank you Travis got a job after learning from your videos
Sinm son (2 years ago)
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.
Senhor Sulaiman (2 years ago)
http://codepen.io/zenu/pen/JKgEWZ This is what I did.Honestly I did this on my new landing page project ! Thanks for your videos.
Noemi Rozpara (2 years ago)
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
Adriano Fernandes (2 years ago)
Nice, Travis. This is the same design principle of https://www.typeform.com/, right? Interaction step by step, more clean, focused and beautiful! Thanks again. : )
Veerendra Tikhe (2 years ago)
cool series man !! 👌💐
Finlay McAfee (2 years ago)
Hasn't Jade now become Pug?
Gautam Hans (2 years ago)
Hi Travis, I have a friend who looks exactly like you. :D
DevTips (2 years ago)
Is he evil?
Alphfirm (2 years ago)
aaaand I don't understand shit
Aditya Kumar (2 years ago)
plz make a video related canvas or svg.
ezkay01 (2 years ago)
Just had to leave some kind words.. For me you're to most entertaining and at the same time very helpful coder!
Sam Webb (2 years ago)
Trav is the man!
Sam Webb (2 years ago)
The last minute and 10 seconds reminds me of everyday of my developer life.
Aakash Verma (2 years ago)
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!
Takordy (2 years ago)
Thank you Travis!!! ;)
ShyneBrady (2 years ago)
Thank you for this great tutorial! I am trying to build the same dropping effect but for some reason it is not working for me. Could you please tell me how I can fix this? http://codepen.io/RezaScript/pen/kXOYpO
mohamed gaber (2 years ago)
Amazing, You really save my life :D
Ahmed Noor (2 years ago)
Thanks Travis for these videos. this is what I could make. http://codepen.io/ahmednoor/pen/NAkyKV
Muhammad Aref (2 years ago)
I'm wondering why you are using a span, then give it display: block?
kerron gordon (2 years ago)
Am late but here is my pen http://codepen.io/kerrongordon/pen/pbmPdZ
Jhon A (1 year ago)
Very good. Its good one.
noureddine ar (2 years ago)
like the intro
Hey Trav! Thanks for the videos, I love em. What's your reason for putting units after values of zero in transforms?
Agata Kubiak (2 years ago)
in my face! Awesome video Travis :)
Vincent Audy (2 years ago)
Pretty awesome to follow your experimentations! Keep it up!
De La Rosa (2 years ago)
Awesome video! Thank you it open my mind with animations. Which program you use in that video for designing and developing the form?
Flavio A (2 years ago)
why does that html look like that
Don't use jade, its fucking trash.
Flavio A (2 years ago)
What are the pros of jade, should i start to use it?
Patrick Lohmann (2 years ago)
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.
Ismet Kovacevic (2 years ago)
Awesome! ps What about the course, when it comes out?
Tarun Gaur (2 years ago)
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
stuff (2 years ago)
Oskar Schölander (2 years ago)
Lol. Didn't do the task, but made a nice toggler ;) http://codepen.io/oskarscholander/pen/AXkyLJ
m.ali petek (2 years ago)
Irving Ventura (2 years ago)
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 ?
mirko rener (2 years ago)
In an other comment he wrote that that comfortable for now in angular :/
Luke Wykman (2 years ago)
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 ;)
Ellie Williams (2 years ago)
Yes, jade has been renamed pug, more info here: https://github.com/pugjs/pug/issues/2184
Josimar Bezerra (2 years ago)
Hey Travis! You're doing an amazing job with this CSS animations series. Absolutely fantastic and helpful! I'd like to say that you have this rare ability that affects who watching your videos with a lot of motivation. Basically an injection of love by WEB development. I'm a huge fan of your channel! Thank you so much for everything! Greetings from Brazil.
Josimar Bezerra (2 years ago)
It's a very tough question... it depends of the direction that you want to take. If you want to learn more about Frontend development, you should invest some time learning great tools like React, Angular and etc. I'd like to help you more but, I don't have a perfect answer to this question. Good luck.
Doug B. (2 years ago)
I probably would rather live one life that lasts 1000 years as long as long as the aging process is slower. (Could you even still walk at 200 years old?!) Oh yeah, and nice coding tutorial as well!
Doug B. (2 years ago)
Depends what type of things you want to create. Perhaps you could learn a backend framework? If you like Javascript, Node.js is a good choice. Then, maybe you'd be interested in learning something like Angular or React.js (this is the point I'm at). You might also want to learn how to use things like Grunt and Bower. They are not frameworks or languages, but are tools that can help you develop more efficiently. Once again, it all depends on your goals and what can help you.
GameOn (2 years ago)
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!
DevTips (2 years ago)
Awesome, thanks for your comment!!
Limited (2 years ago)
I added an animation for the pagination pills, let me know what you think - http://codepen.io/anon/pen/rLgGXJ
Paul McCann (2 years ago)
Is it slightly smoother if the pills are animated with transforms? http://codepen.io/paulmccann/pen/zBQagJ
mirko rener (2 years ago)
Great *_* Really nice touch :)
DevTips (2 years ago)
oh I love it!!
Clóvis Junior (2 years ago)
Could you create a video using angular, developing a crud!!!
DevTips (2 years ago)
Sorry, I don't know angular.
Dirk van Lierop (2 years ago)
Thanks Travis. yet again another great video. also your Channel is growing into a nice interative one ;) Keep up the good Stuff!
DevTips (2 years ago)
Thanks Dirk, I appreciate the love!
mirko rener (2 years ago)
Great to see 121 positive and happy comments *_* No trolls and happiness for everybody <3 This channel is going to be more and more awesome :D
DevTips (2 years ago)
Back to normal :)
mirko rener (2 years ago)
http://codepen.io/Okrim/pen/AXkoYL a bit simpler animation, but in the next days I will try some effect like the page turning :) Thanks for the great video Travis!!You are motivating a lot of people to get the hands dirty with some code XD Great job ;)
mirko rener (2 years ago)
http://codepen.io/Okrim/pen/AXkoYL a bit simpler animation, but in the next days I will try some effect like the page turning :) Thanks for the great video Travis!!You are motivating a lot of people to get the hands dirty with some code XD Great job ;)
mirko rener (2 years ago)
*_* I'm so glad that you like it :) I was paying with also translate 3d in the z axis, and doing some experiments, I forgot to put ease-in-out after changing my mind :/ Thank's for noticing :D PS: fixed and added cubic bezier to last animation ;) PPS for the next video (I'rode on the Patreon's mail that you are seeking suggestions) you coul'd explore a little bit more of 3d positioning :) I did this experiment http://codepen.io/Okrim/pen/PzgXmy following this post that I found really helpful to understand how things move with css in 3d https://css-tricks.com/creating-a-3d-cube-image-gallery/ Thanks again Travis and keep on hacking :D
DevTips (2 years ago)
This is fun, I like the way it feels like it comes and goes. Why linear timing?
JR Cologne (2 years ago)
Hi Travis, here is my fork: http://codepen.io/jr-cologne/pen/dXERAp I would appreciate any sort of feedback. Thanks for your great videos! :)
JR Cologne (2 years ago)
+DevTips I fixed it. Now they come from different directions.
JR Cologne (2 years ago)
+DevTips Yes, I think that's a good idea. Thank you!
DevTips (2 years ago)
This is cool. One idea is to make the in/out come from different directions. That way they feel like a progression of the same idea.
Pacificus facio (2 years ago)
Your are the best Waiting next video
DevTips (2 years ago)
Monday :)
Dave Liley (2 years ago)
Nice! I think this will work nicely for one of my projects! ¬¬ Steal!
DevTips (2 years ago)
Link when you are done!
Evan B (2 years ago)
That DevTips commenting spree tho. Thanks, for the vids :D
DevTips (2 years ago)
You are welcome! :D
Michael Richins (2 years ago)
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.
Michael Richins (2 years ago)
Here's mine: https://codepen.io/MrGrigri/pen/LkoWdj
Robbie Sherman (2 years ago)
Hey is it possible to see your forked form?
mirko rener (2 years ago)
Did the same with some graphical tweaks :) It's so annoing to see that scroll bar pop in and out XD XD
DevTips (2 years ago)
Good call :)
Mounir NoSa (2 years ago)
I read my comment and it's not PDF but PSD sorry
DevTips (2 years ago)
oh, haha! I was like. Well, that's pretty unusual, but okay!
Mounir NoSa (2 years ago)
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
DevTips (2 years ago)
Thanks for the suggestion!
Nipun Paradkar (2 years ago)
I love this series! :D
DevTips (2 years ago)
Davide Vico (2 years ago)
I changed all the animations :) check out my pen: http://codepen.io/masterdave/pen/BzZzPJ?editors=1100
Davide Vico (2 years ago)
+Michal Buzogan I should add some prefix then. Thanks for the heads up :)
Michal Buzogan (2 years ago)
broken in firefox ;) but nice idea
DevTips (2 years ago)
That fold tho... SEKSY!
David Leger (2 years ago)
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.
DevTips (2 years ago)
Oh that's interesting! Thanks for pointing that out!!
petrossianv1 (2 years ago)
Travis you are awesome!! If you have time please make video series of input elements styling and other stuffs.
DevTips (2 years ago)
Thanks for the suggestion :)
iEatWebsites (2 years ago)
I added a "DONE" class to the previous element. Simple but helpful. :) Here my pen: http://codepen.io/jota_alien/pen/NAVbdG
DevTips (2 years ago)
That's HOT! Love it!
Samuel Altarac (2 years ago)
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!!
Samuel Altarac (2 years ago)
+Davide Vico thanks Davide.
Davide Vico (2 years ago)
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: http://stackoverflow.com/questions/5818312/mysql-with-node-js
Davide Vico (2 years ago)
You could do that using jQuery. Look up $.ajax() here: http://api.jquery.com/jquery.ajax/ As for the form data check out this tutorial on scotch.io: https://scotch.io/tutorials/submitting-ajax-forms-with-jquery
DevTips (2 years ago)
That's not really my forté, but there is a comment on this video, someone re-wrote this pen to do just that.
Voicir (2 years ago)
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
DevTips (2 years ago)
Thanks for the suggestion :)
Wiejeben (2 years ago)
Felt like rebuilding it in VueJS :-) http://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.
DevTips (2 years ago)
Hottness. Thanks!
ezekielthemack (2 years ago)
Thanks for your help Travis. Much appreciated.
DevTips (2 years ago)
You are welcome!
Milan :D (2 years ago)
I want to play a game! :D
Milan :D (2 years ago)
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? :)
DevTips (2 years ago)
What's your answer? I'd take 10 lives.
J Shelfwood (2 years ago)
Another great video, keep it up Travis!
DevTips (2 years ago)
Thanks Hawk!
Saleh Ahmad (2 years ago)
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 :) )
Saleh Ahmad (2 years ago)
Thanks Travis this really helped me a lot. your the best man...
DevTips (2 years ago)
Christophe Hebb (2 years ago)
Yet another great video. Thanks Travis!
DevTips (2 years ago)
You are welcome, thanks for watching Christophe :)
darkbrian ' (2 years ago)
your face is way to close to the camera! like vagina closeup in porn.
DevTips (2 years ago)
vag-face huh? That's a new one.
dragos mihai (2 years ago)
Could you please make a video on perspective and vanishing points? thx:)
DevTips (2 years ago)
interesting, thanks for the suggestion :)
Peregrino Cao Marín (2 years ago)
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!!!!
DevTips (2 years ago)
You are welcome! Thanks for watching the whole thing ::))))
Vids (2 years ago)
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!
mirko rener (2 years ago)
Yeah, it's always great to meet like-minded people :) Don't worry! Take care and have a nice holiday ^_^
Vids (2 years ago)
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!
Vids (2 years ago)
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!
mirko rener (2 years ago)
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 :)
DevTips (2 years ago)
I roam around mountain view, about an hour or so south of SF. If you come down we can get a drink.
carl Neilson (2 years ago)
Thanks for great vid
DevTips (2 years ago)
You are super welcome!
Sam Benson (2 years ago)
As if you've done Forms this week! - I'm trying to create one for my website! #youreadmymind
Sam Benson (2 years ago)
You disobeyed the 12 Basic Principles of Animation!! haha..
Sam Benson (2 years ago)
We love you Travis!
DevTips (2 years ago)
that's a win!
Jei Dawnn (2 years ago)
You are my leader!
DevTips (2 years ago)
I demand more cookies!
Ihatetomatoes (2 years ago)
Thanks Trav, love this CSS animations series. Keep it up man.
Ihatetomatoes (2 years ago)
Chance haha, I didn't expect you here:)
Kesus Kim (2 years ago)
+DevTips lol tomatoes
DevTips (2 years ago)
Thanks tomatoes :)
Ali Ghali (2 years ago)
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 :)
DevTips (2 years ago)
Thanks for the suggestion :)
XO GamingGB (2 years ago)
I learned more from your vids than I learned at college and university combined!! Thanks
XO GamingGB (2 years ago)
+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. 😀
DevTips (2 years ago)
Damn, I should start charging tuition!
XO GamingGB (2 years ago)
one day I want to be that good...
XO GamingGB (2 years ago)
+DevTips to be honest I had no idea that CSS is that powerful and is able to do such things!! Cheers 😀
DevTips (2 years ago)
Keep at it, you'll be better in no time.
Bartol J. (2 years ago)
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?
Bartol J. (2 years ago)
yea thats what I kinda said above ;)
victornpb (2 years ago)
It is MP4 video synced with scroll using javascript.
Bartol J. (2 years ago)
yea thats what I kinda said above ;)
Nipun Paradkar (2 years ago)
I just had a thought on this. You can do the following: Get a video of the Macbook opening and then control the position of the video based on the amount you scrolled.
Bartol J. (2 years ago)
i know that now, i didnt before and i am glad i found that out!
Anastasia Nikokosheva (2 years ago)
This is a great video, thanks a lot Travis!
DevTips (2 years ago)
You are welcome! Thanks for watching :)
Eliseo Martelli (2 years ago)
Are your videos CSS porn or what? 😂😂😂 We want a bonus video of the 6 minutes of problem solving ✌️
Eliseo Martelli (2 years ago)
+DevTips Good 😂😂😂
DevTips (2 years ago)
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.
manish adwani (2 years ago)
this is last time in asking killing it with jquey?? I'm sad
jantje beton (20 days ago)
don't get frustrated boy !
arsum04 (2 years ago)
+DevTips which game
J Shelfwood (2 years ago)
+DevTips Rest and Relaxation. An important rule to being an efficient developer ^^
DevTips (2 years ago)
yea, and I got a batman video game that aint playin it self!
J Shelfwood (2 years ago)
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.
v topalek (2 years ago)
Trav, u da man !!! tnx!!!
DevTips (2 years ago)
Thanks for watching!
Timeo Schmidt (2 years ago)
Your videos are way too long - yet interesting.
DevTips (2 years ago)
I was never good with brevity. Personal flaw.
Leo (2 years ago)
Like if you have become a designer because of dev tips ><
Jignesh Mistry (2 years ago)
You are awesome brother :) thanks for the all this things.
DevTips (2 years ago)
You are welcome!
Sudhakar Maddela (2 years ago)
Through ur videos i learned more new things, thank u man
DevTips (2 years ago)
That's a win then!

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.