This course has been updated! We now recommend you take the CSS Animations and Transitions course.
Transcript from the "Course Wrap-up & Resources" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Rachel Nabors: Let's go back into Chrome. Because Chrome did tout that they were gonna have some super super cool animation tools at Chrome Dev Summit this year. Hang on, hang on, we can do this. I don't want you there anymore, I want you here. There you go. That's better.
[00:00:18] Thank you, Chrome. Thank you for listening to me. I don't want to see timeline. I want to go to. Have to hit escape and then go to animations. I'm just gonna make this one bigger. If I can, there we go, aw I can't. So anyway. Elements, there we go.
[00:00:40] Making the animations really big. Now I'm gonna refresh it. So check it out. You see these little things happening down here. These are actually collections of animations and they let you skip between them. So when I click this to go down, this should result in another set of animations.
[00:00:58] This tool may or may not be handy to you in your workplace. But the idea is that you can jump back into the animation and have access to its timeline. See how I'm moving her forward and backward and her screaming kicking or all the way back to the beginning here and I can actually like stop [SOUND].
[00:01:19] I have a little bit more control. It's a new feature, it's not as 100% useful as I'd like it to be, but I admire the chrome team for their ambition in creating this animation and this animation tool set. You can even hit pause you can just remove them.
[00:01:38] It's a good idea. I like where they're going.
>> Rachel Nabors: But I actually have some experience with some really cool animation tools that I had some fun input on. There is this site that I helped build with Mozilla. I'm just going to say, you know a disclaimer, I worked on this.
[00:01:58] Basically, it's this little educational site that shows you how to use the dev tools over at Firefox Developer Edition. And it's neat because not only is it a tutorial.
>> Rachel Nabors: Not only is it a tutorial. But it also rewards you for doing things right with knowledge. It's an underwater tour, they're little videos that show you how to use each tool.
[00:02:29] So what we're doing here is you'll notice that this fish, he has a paused, he is paused in his animation, it's not set to running. But we can use the animations tab. Boop, boop, there's the animations tab, to actually hit play and there he goes and that triggers an event which gets all of his little swimmy, flashy buddies to join the party.
[00:02:54] And the other fun thing is after we get him there, We can actually go all the way up and check out all of the fishies that are swimming and we can actually manipulate all of their different timelines together and hit play. That's a lot of fun. There's examples for the cubic-bezier tools which we already experimented with.
[00:03:26] Actually I'm going to turn the motion off for this. So this one might induce seizures in some folks but this is now flashing at such a rate that you can see that it's not going to cause seizures. This is a low motion alternative,
>> Rachel Nabors: But the idea there was that you would scrub to see that the squid aren't actually flashing red and white, they're actually fading really really fast between the two.
[00:03:54] Just like they do in the wild. Let's see, do I have any other really cool tools? So basically I think I'm just showing you off, showing off these cool little animation tools over here. I love the timeline. I love how cute it is. I love how it lets us see exactly who's moving and then we can see the different changes like this is that cheek patch.
[00:04:16] See, can we jump to this guy? Scroll interview. There we go. Hit play and notice how I hit play on just that blinking cheat patch right there. And if I want to get them all playing, I go all the way up, and hit them all. There we go.
[00:04:40] Right now the two browsers are sort of caught in a death struggle for who can create the best timeline tools first. I'll be quite blunt. Neither of these tools are perfect. Part of that is because the original tools were flash based. They were a UI built by a commercial company, Adobe.
[00:04:57] And their solution worked for their developers. It doesn't necessarily mean that that's the solution that's going to work with the web. Flash had limitations. Limitations makes tools easy to use. The web has its different kind of imitations and limitations, and those limitations can make it harder to build tools for.
[00:05:18] I'm hoping that we will see a competitive race to make the best animation tools where the best ones will win. The best ones for the community that is. That's my hopes. Experiment with both of them, figure out which one makes you happier. For me, using Firefox developer tools made the project go so much faster and I had a lot of input on this isn't working.
[00:05:38] This is working, etc. So pick what works for your workflow, but do know that there are animation tools, and when you are developing animations, they make animation development so much faster. Especially being able to change things like Bezier curves and durations on the fly, and being able to scrub back and forth and slow down the overall animation time.
[00:05:59] So much useful.
>> Rachel Nabors: All right. Here's the fun part where I get to give you a little taste of what's coming up. The Web Animation API is actually what lets both Chrome and Firefox build tools like these. I've mentioned it throughout this talk, and this workshop. CSS animations are great but they can't do it all, and specifically the web animations API underlies the CSS animations and you can write animation in the web animation API.
[00:06:30] It's not just for browsers to access CSS animations that you can build tools with. It's also for you to build animations with using JavaScript and CSS properties. Just as a little sample of what it can do that CSS on its own can't.
>> Rachel Nabors: When we add cats with CSS you'll notice that they're not all running in sync.
[00:06:52] That's because each one of these animations starts at a different time on the document system clock. So all of these animations are starting at different times and we physically have no way of synchronizing them. There is no way to synchronize those animations with CSS, but with the web animations API, we are actually able to copy the current time of each cat and then use it for each other cat that we're making.
[00:07:20] This way they all run in sync, no matter when we add them useful, not useful, use cases will tell. And another fun thing which is useful from a usability perspective, we have access to that playback rate. So what happens is we can speed up how long this animation is taking or we can slow it down.
[00:07:43] Well, I slowed it down too much.
>> Rachel Nabors: If you're interested in things like that I do encourage you check out these CodePens, and keep an eye on MDN's web animation, API documentation as I'm currently updating it and writing it. And future generations will get to go there and check it out.
[00:08:03] For more information just keep an eye on rachelnabors.com/waapi, or web animation API. You can find me on rachelnabors at Twitter or at rachelnabors.com. I would be ever so happy if you joined the slack animation at work community. This is a great place to meet other people who are working with CSS animations, the web animation API, GSAP, all things animated.
[00:08:29] We are all good friends and we'd love to have you sign up for web animation weekly if you haven't already, all new animation of elements go out there weekly. And if you have the chance, I have a five minute survey I would be super happy if you would take it.
[00:08:44] I will even give you a coupon for one of my other online courses as a special thanks. Lastly, let's be animation friends.
>> Speaker 2: There is one last question from Kevin.
>> Rachel Nabors: All right.
>> Speaker 2: What are you most looking forward to do with animation and an API you haven't explored yet?
[00:09:03]
>> Rachel Nabors: I'm not sure how to interpret that. Is that an API that I haven't explored, like an API that I would like to use with animation that hasn't been made yet? Or is that the web animation's API, something I haven't done with it yet?
>> Speaker 2: What you're looking forward to not doing was CSS transitions and animation with WAPI.
[00:09:25]
>> Rachel Nabors: I'm actually looking forward to be able to move behavior fully into JavaScript. Because right now we are having to define behavior in CSS, this thing should move like this. But, for a lot of us i know is comfortable to move that sort of behavior into JavaScript, and to have JavaScript handlers doing this, if animations are available to them or not doing it at all and just substituting jump cuts if it's not the case.
[00:09:53] I would love the idea that you could build a JavaScript library from scratch to just handle your user interfaces animations the way you want. Not having to download a big beefy library like GreenSock. Not having to use somebody's SAS functions, just being able to build something specifically for your needs.
[00:10:10] That's the most exciting part for me of the web animations API. It will really let people approach animation from a more programmatic angle.
>> Rachel Nabors: Good question, Kevin.