This course has been updated! We now recommend you take the CSS Animations and Transitions course.
Transcript from the "Introduction" Lesson
[00:00:00]
>> [MUSIC]
[00:00:38]
>> Rachel Nabors: I'm Rachel Nabors. And I have built everything from interactive demonstrations of Firefox's really cool web animation tools to interactive stories with Adobe Inspire. We'll be taking a closer look at Alice in Videoland a little bit later on in this course. And sometimes I even help clients bring animation to their motion design systems and style guides.
[00:01:09] This is a more practical application of animation. And it's becoming even more popular these days. With things like Google's Material Design And IBM's motion design language coming out. And showing people how animation and motion are an important part of a healthy balanced approach to UX and design. I also run WebAnimationWeekly, which is an excellent newsletter on the comings and goings of this bustling space.
[00:01:35] Animation has taken off, and it changes literally every week. So if you wanna keep up, this is a nice little curated list to get in your inbox every week. What are we gonna learn today? We're going to learn all about CSS transitions and animations. How do you use animation in product design.
[00:01:54] How to create stateful animations with JavaScript. How do you use developer tools to manipulate said animations. How to design performant animations. Now, a few things before we move forward. For your convenience, all of these exercises use jQuery. I realize that a lot of people who will be in this course are already fully competent at using JavaScript without jQuery.
[00:02:20] If you want to do the exercises without jQuery, you're welcome to it. But I also realize a lot of people come into frontend development jQuery first. Which is why these are not all written in plain, old, vanilla JavaScript. Everyone knows the jQuery syntax. Everyone feels more at ease with it, we're fine.
[00:02:39] I'd rather you be paying attention to the CSS animations and transition syntax. Than figuring out how to do something new with JavaScript that you might not have done before. We also use -prefix-free. -prefix-free is a little library, it's a little JavaScript library. And what it does is it lets you write your CSS without having to worry about putting on -webkit, blah blah.
[00:03:01] All the different prefixes that some browsers may or may not require to work correctly. -prefix-free, what it does is you give it a style sheet with no prefixes in it. It compares it to whatever the browser supports. And if it sees that prefixes are needed, it injects some of that prefix CSS into the browser.
[00:03:21] I do not recommend it for production work. We are using it here simply because I want you to focus on using this proper syntax. Not on remembering what prefixes to use. In a production environment you should use something like autoprefix or Sass mixins to handle that for you.
[00:03:37] So bear that in mind. I will mention when certain prefixes are needed and with what browsers. But I do expect you to have some sort of a solution set up to handle that regularly for you. And lastly and most fun, we are going to be using CodePen for our experiments today.
[00:04:00] I prefer to use CodePen over just handing you a big GitHub repo. Then spending an hour in the morning getting everyone's dev environment set up. Or telling where the files should be stored on your hard drive. CodePen is a lot of fun. It is a site that lets you, well, it's kind of like Dribbble for code, if you're a frontend developer.
[00:04:21] It lets you write CSS, JavaScript, and HTML on one hand of your screen. And then watch it live update in the other hand of your screen. Sounds a lot like DevTools. Well, the nice thing is you can save those examples and then share them. Also, you can fork the examples I'm giving you, and save them to your own account.
[00:04:36] If you would like to do this, I highly recommend you go to codepen.io now. And sign up for an account before we get started.