Listening to callbacks
All GSAP animation classes come with built in call backs. A call back is a function that is triggered whenever an event happens. They're very similar to events (a topic we cover in our OOP courses) but are more simple as you just send in the function and it gets triggered whenever specific event occur. In this lesson, we'll wrap up all the callbacks that exist in TweenLite: onStart, onProgress, onComplete and onReverseComplete.
Video Transcript
00:00This topic isn't necessarily incredibly new, but we're wrapping up this topic
00:05We talked about callbacks throughout the courses
00:08But we only seen one of them though on update and we used it quite a lot from the first chapter in this wrap-up
00:15video lesson we're gonna look at all the other callbacks that exist on start done
00:22Complete done update and on reverse complete. So let's see it
00:27it's quite fascinatingly cool and
00:30We're also gonna look at how to reverse if we're already gonna talk about on the largest last topics that we're gonna cover
00:36But don't worry
00:37They're not hard at all
00:38If you recall when we were working with on update and on update params
00:43We saw how we could basically get information from our tween as it's happening
00:48But really throughout our course in general we this course in general
00:53We didn't modify tweens as they were going and that's really what we're going to be doing a lot when we move into the advanced course
01:01Which will be about how to manipulate animations as they're going on and
01:06Beyond just working with them in a sense
01:10Statically where the animation itself is actually or when once it's going on it's going on already
01:14Now with that said let's look at a little bit more of customization
01:18More in the level of how do we know when and something happens to the animation?
01:23For example, how do we know when the animate has started or how do we know when the animate has completed because sometimes we're gonna
01:28Want to do something specific when an animation nation begins and when an animation completes?
01:34So to do that, I'm just gonna jump right in and I'm gonna go back into this tween itself
01:38And I'm just gonna go ahead and add those properties
01:42Now we've already seen the the process of adding in on
01:46Update so I'm not gonna do on update again
01:48But I'm just gonna focus for a second here on on start and there's basically by the way
01:52There's four built-in
01:55Callbacks, this is what they're called that let you know when an event when something happens inside of the
02:01Animation library one was the on update that we've seen already. The next one is the on start. I'm just gonna call on
02:07buttons start
02:10And I'm just gonna go ahead here and just create really quickly a function for it
02:15function on button star and
02:18By default it doesn't have any parameters and I could just put here a console that log
02:24animation
02:25started and
02:27I can go ahead and I'm just gonna for the sake of clarity
02:30I'm gonna go ahead and add all of the callbacks or you know
02:33The next one that we haven't seen which was on complete and on complete as you could probably guess is gonna basically happen when
02:40our animation completes on
02:43Let's keep the convention on buttons complete
02:48And I'm just going to go ahead here copy this function and
02:53I'll just copy the name of the function and I'll make sure that it'll have your animation
02:59Completed and if I go ahead and say this and go to my animation and click on refresh
03:03We're gonna see that we're gonna have once I fix whatever error I have your on button start
03:08It says doesn't exist. So I have to make sure that it will exist. So on buttons. It wasn't on button
03:14So let me quickly click click refresh again
03:17So we're gonna see that our animation started and once that animation is complete
03:21We're gonna see that animation complete and in these type of scenarios I can now take over and say okay
03:25I want to do something specific with that animation complete such as maybe
03:28Continuing the eases instead of using the delays that we were working with so far
03:34now as we saw O2 with the on update each and every
03:39Status update has a parameter that enables us to send in extra information and we have we call that on
03:46Start so if we're going to on star we say on star and we add params
03:50And then we could send inside an array and define basically what would we want to send in?
03:55For example, we saw already that if we send a string in and just send it with the word self
04:01We could actually send inside the actual ease itself that hasn't even been created yet
04:06Because once it's created inside it's gonna find it and send it in. So let me just do that both for the on complete and
04:12Also for the on start, so I'm gonna do that also for the on complete params
04:18And now I could send it and I could send your maybe self as a variable and I'll know that this is the tween itself
04:24Or I could call it tween
04:27Tw for tween and I'll know that the tween itself is going through and as we said it's a race
04:32I could send it as many things as we want now beyond the property on start that enables me to send itself
04:38I have another property and that property is called scope now
04:43we've worked with scope for quite a lot throughout the first course the the first bundle of the second bundle and
04:50Scope really just says who is the this when we say this inside here
04:54So if I go ahead here and just for a second, I'll just add this into the trace itself so we could see
04:59What is this by default?
05:01We'll see that by default to the tween library actually sends in the actual tween itself as the default object
05:08Although it's called object here, you know, you could see that it's total duration and so on and so forth
05:13So we know that it's basic
05:15It's basic this the this that is whenever oopsie
05:18But this whenever we're inside the button is the actual tween itself
05:21But what if we wanted it to be something else? What if we wanted the this to be let's say for example
05:26We have your a new var and I'm just gonna call this var
05:30let me just call it really quickly buttons and
05:34Buttons is gonna be a jQuery object
05:37And what if I needed to continue working with this jQuery object when I'm complete and I don't want to get the tween
05:44That's not what I need and that type of a scenario
05:47I could go inside of my on start and literally tell on start. Hey on start. I need you to be something else
05:53I need your this to be something else and I could say hey scope
05:57From now on your scope is actually going to be that buttons
06:01So I'm overriding the default configurations of between library and I'm basically telling it
06:07Hey from here on you are the buttons
06:09And if I go ahead and save this and click on refresh and go to my application
06:13We're gonna see that now the object itself is gonna be the jQuery object which contains our
06:18Buttons and the HTML and so on and so forth. But because we didn't change it in our on complete
06:23We'll see that here. It's the actually it's actually the tween
06:26So let me just make sure that I put this in the comments here
06:29the this here is
06:31the jQuery object and that this and on a complete in our scenario the this here is
06:39the tween
06:41Itself and you can control and really define what it is
06:44And by the way, just like on start has a scope so does on complete
06:49So does on update that we've seen throughout the course now before we wrap this up
06:53I want to add just one more callback and this is the last callback that exists inside of the tween light library before we move
07:00into the tween
07:03Max and that will be the on
07:06reversed complete
07:08So on reverse complete and let me just I'm gonna copy paste it because it's like such a big big word
07:16Make sure that I don't have her a typo which I do. I knew it
07:19It seemed like it was with a typo. So on reverse complete
07:23I'm gonna call the I'm just gonna create a really really really quickly a new buttons on button start. I'll try this on come on
07:31You know, let me just copy this as why not let me just call this on
07:36Reverse complete. I'll add the buttons on buttons reverse complete
07:40And let me just make sure that I have your word wrap. Where are you word wrap our friend?
07:44And I'm just gonna go ahead of your copy this create this function really quickly
07:48I'm not gonna put anything inside of it by default because I know that this is my tween itself
07:53so I'm just gonna put your a console dot log on
07:58But in reverse complete that should do it for me and I'll just put your auto
08:03This now by default, I'm not gonna ever get this because I am never in a scenario where I'm reversing something
08:09And this is the first time we're looking at it
08:10But hopefully you were looking into the tween library in general throughout the course and even if you haven't there is a function called
08:17Reverse and the function reverse basically switches my animation backwards having it animate back
08:23Which is incredibly awesome
08:24And I could basically do this inside of my on buttons complete or anywhere else really and I'm just gonna go ahead to my
08:30Button because I know it's the tween itself and I could sell it
08:33Hey, I want you to reverse and if I do that and click on save notice what's gonna happen next
08:38And I'm gonna go ahead here and click on refresh and we'll see that our animation completes
08:43And once it's really complete it's gonna start going backwards and returning to that initial position that it was at
08:50Finishing up with on button reverse complete letting us know that that reverse process was complete as well
08:55now if I wanted to I could have very easily created here basically, uh
08:59An endless loop. So if there was something that I wanted to animate forever
09:03I could just go ahead and say hey this again
09:05I want you to play and this around time around when I'm saying play it should
09:10Basically just play from the starting point because I didn't set any configuration here
09:14And again, we will talk about the advanced features of these stuff in our advanced course
09:19But I encourage you to explore them even now because our advanced course is gonna be quite advanced
09:24So with that said what will happen now is we're gonna have here an endless loop of sorts or really a yo-yo effect
09:30And this yo-yo effect will literally be so with when this is done this will play and then this will play and this will
09:36Play in back and forth because it's gonna each time gonna when the callback is over
09:40It's gonna move on to the previous callback and back and forth each time now
09:44I want to tell you also how could we prevent that but let me show you first that that really is what's happening and I'm
09:49Just gonna go ahead and push down my animation to be faster so we could see it relatively quickly
09:53And if I click on refresh here, we'll see that animation takes a second
09:56It animates back and backs in and out and in and out and it's kind of like an end
10:02Never ending kind of process because of that ease now
10:05What would happen if you wanted to actually delete it? That is a really great question
10:08So, you know what?
10:09Because this lesson is probably getting really big and we covered quite a lot of stuff. We covered basically every single one of the
10:16Callbacks that are in existence in the next lesson. I'm gonna show you
10:19How do you actually kill an event after it was already created without killing your?
10:25Pween itself just by saying hey, I don't want to use that again
10:28And we're gonna look at that immediately in the following video and that'll be our last last topic before we move in to tween max
10:33And by the way, every single thing we're talking about right here is also relevant to tween max as well