Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
See animation looks pretty good. Everything's going to the right place. But it's still missing something. When the animation completes, these things are still left over. It would be nice to get rid of those as soon as the animation is done. In this movie, we're going to look at call backs which are a generalized way of dealing with events in the middle of other things you're trying to do. So looking back at the code, here is my ghost which I'm animating. So at first I have my object with all the things I want to animate. Then I show the duration.
I could plug-in an easing function here if I wanted to. In fact, let's just do that for fun. And then I can add a call back, so what is a call back exactly? A call back is a function that you call at a certain time. Different methods might offer multiple call backs or just one, and they'll fire it different times in response to different parts of the original function. So the original function in this case is animate, and it offers one place for a call back. Which is when the animation completes. So I can put in a name function here, like animation done which I could define somewhere else.
In a case like this where its just one function that I am only going to call in this place. I like to use an anonymous function, so once this function is called something is going to happen, so lets start with something simple, just log a message to the console, and say I've made it. So, this animation will run. It'll animate these properties in this amount of time, using that easing. And when it finishes, it will fire this message. And just to be clear here, you might think that if I put this same thing down here like say console.log ('Here I am') You might think that this would happen as soon as the animation completes.
But if I want to do something specifically when the animation completes, I need to use a callback. So one thing that might be nice in this case. I'm going to get rid of the console. Would be to make this disappear as soon as it arrives at its destination so we just animate the fact that its going into the cart. And then when it gets there it goes away, here is how we can do that, we can use this again. So we see this up here which makes reference to this up here, this is a context dependent keyword, so here's one context where this prefers to that selected item and now down here I am using the animate method on ghost, so if I use this down here it refers to ghost.
And what I can do is call remove to remove ghost from the dawn I'll save this and now reload, click this, and there we go, it animates over there and disappears. And this will work on all of these. So, especially with animation where timing is critical. Look into the use of call backs. Animate offers a completion callback, and so do many of the other simple ones that we've looked at. So even when you're using a simple animation You can do things, specifically when the animation completes.
No sooner, no later, through the use of call backs.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.