This course has been updated! We now recommend you take the CSS Animations and Transitions course.
Transcript from the "Stateful Animations Summary" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Speaker 1: Can you tell from the event which of the key frames it finished?
>> Rachel Nabors: Good question. Can you tell from the animation event in which one of the key frames blocks just ran? I'm gonna say there's no direct way to do that. However, you might want to double check me on that one, I might be wrong.
[00:00:24] But to my knowledge, no. You could have to do a little bit of sniffing to see what the final value is, but there should be. If there isn't a way, there should be a way.
>> Rachel Nabors: I know there is with the Web Animations API. So it is possible.
[00:00:43] It is physically possible for the computer to know which one of the key frames blocks has ended. With the Web Animations API each animation set has a special finish or on finish event which delivers a promise or a callback respectively. So it is possible to know which of those it is.
[00:01:03] But good question. I wish I weren't so tired I could probably answer it better.
>> Speaker 1: No it's a good answer. I don't know check it out.
>> Rachel Nabors: Okay fair enough. There is MDN documentation if you go to MDN I think it's .NET It's a great resource for learning all sorts of things.
[00:01:24] I'm currently the person writing all the Web Animations API documentation but it has documentation for all the animation event listeners as well. It's a good place to get your feet wet. Other questions?
>> Speaker 3: Those are running here MVM?
>> Rachel Nabors: This is a great chance, hang on a moment.
[00:01:43] Let's do a little plug
[00:01:44]
>> [MUSIC]
[00:01:49]
>> Rachel Nabors: So MDO.
>> Speaker 3: MDN I see yeah.
>> Rachel Nabors: MDN developer.Mozilla.org. This place, so often abbreviated MDN from Mozilla Developer Network. It's really nice compendium, over in the docs. You can do a search for instance animation start, and it will bring up all of the locations let's see you got Animation event, transition event, here we go.
[00:02:29] Animation event represents events providing information related to animations. We can get animation event lapse time and mission. Check it out. [CROSSTALK]
>> Speaker 3: Just looking.
>> Rachel Nabors: [SOUND] We can get animation event.animationname. So we can get a dom string containing the value of the animation's name so whatever it's fired, whatever just fired the animation event animation and animation iteration it will also deliver the name of its key frames block so you could be like hey Tuna only do this.
[00:03:02] My God I wanna do it, I want to actually do it. I want to but it'll probably crash and burn and look very embarrassing but I've been up here looking great all day and maybe it's time for that. So what we would do is we'd put a little check in here where we'd be like hey, is this?
[00:03:22] What's the name of that Tuna walk cycle? Someone give it to me.
>> Speaker 3: Walk-cycle.
>> Rachel Nabors: Walk-cycle so it would be like hey this is walk-cycle and if it is we want to fire this thing. So we would do something in here that would be like [SOUND] see animation event, animation name [CROSSTALK] so we'd be like hi animation name.
[00:03:50] This is how developers do it. Hi animation name I'm going to guess that we would do like a I'm gonna look so embarrassing, but here we go.
>> Speaker 1: That's great.
>> Rachel Nabors: I'm gonna guess that we're gonna be like, please let this be supported in Chrome. We're I'm gonna be like if the animation name, it's gonna be an if statement, if e.animationName === "walk-cycle" and then we'd be all like, and we gotta put parentheses on that, and then we're gonna be like curly brackets, this add class sit.
[00:04:30] Does it work? Yes, it works. We did it. [APPLAUSE] Wait no.
>> Multiple: [LAUGH]
>> Rachel Nabors: It didn't work.
>> Speaker 1: Actually it's a little bit lower than that.
>> Rachel Nabors: Little bit lower?
>> Speaker 1: Yeah,
>> Speaker 1: You have to look in-
>> Speaker 3: AnimationName.
>> Speaker 1: There's original event, gives you the actual event.
[00:04:54]
>> Speaker 3: You're looking at the jQuery interpretation.
>> Speaker 1: When you're passing that in.
>> Rachel Nabors: Okay, what's original event?
>> Speaker 1: On your event that got passed in?
>> Rachel Nabors: Yeah.
>> Speaker 1: Okay, it's-
>> Rachel Nabors: It's a jQuery event?
>> Speaker 1: Part of the event-
>> Speaker 3: Right after E.
>> Speaker 1: In a class itself.
[00:05:11]
>> Rachel Nabors: All right.
>> Speaker 1: Okay, so you have to get below the actual event class. So E.original event with the E capitalized.
>> Rachel Nabors: Wow, that's something I haven't used before. Let's see if that works. My God.
>> Speaker 3: Nice. JQuery wraps up the original event?
>> Rachel Nabors: That's right.
>> Speaker 3: It's on property.
[00:05:31]
>> Rachel Nabors: Man. This is what I get for just going straight with jQuery. So, yes, do have to use original event to get past that jQuery event. But dang that's how you could do it.
>> Speaker 5: But this is so cool.
>> Rachel Nabors: You could write a tiny little animation event library to handle your site's animations and help you fire animations when they're finished.
[00:05:53] It would be really cool. Well how's that for some live coding? Nice. This documentation is new.