What does time actually mean?
As we drive to our end, we ask ourselves what is the meaning of time and space? Although, we can't answer that question, we can answer what it means for timeline animations. In this lesson, we will travel through and understand the differences between the time methods of GSAP timelines.
Video Transcript
00:00If there's one thing that you'll want to memorize now that you know about timeline max and you're working with timeline max as well is
00:08all the different time functions and what they do to know the difference between the time and the seek and the
00:16This and of that I'm kidding the time and the seek and all the total time total duration total
00:21Three dots. So that's what we're gonna do in this lesson. It's not gonna be a very visual lesson
00:26Although we'll end it up with a little cute extra
00:30Animation to speed and slow down our animation, which is kind of cool as well
00:34But we're gonna do is make sure that you know those topics and really that's it
00:38And this completes our course and completes the core advanced training in
00:44G-SAP and I hope you really enjoyed it. And I hope you just
00:47post the comment below tell us what else would you want to know and tell us if you enjoyed it and
00:54If you like our training, so that's it
00:57So thank you so much for watching and I hope to see you in the comment section and in our future titles as well and make
01:02Sure to check if there's any bonus extras because we are planning to make a couple of bonus extras
01:07So make sure to check them
01:10Lecture in this course and
01:13Beyond this course last lecture in this chapter and I wanted to talk about time because it's such an important thing
01:20We've been playing with time throughout the whole
01:23Bundle of courses, but I wanted to spend a little bit time now that we've added also
01:28Timelines because now there's a question of how long is our animation when we're asking our main timeline
01:34Is it the duration of the animation itself? Is it the duration at the other animation including repeats?
01:41What is the actual duration of our animation and that's gonna be a very important key aspect whenever you're going to try to figure out
01:49Where do you want to position your time basically now in general whenever we have oto?
01:56Loops or in our case when we have a repetition when we have your yo-yo effects when we have your repeats
02:02We're gonna have different values coming back to the functions that so far. We're all giving us the same information
02:08So total time total duration total progress
02:11Have very distinct differences now that we want to pay attention to them and I want to talk about it
02:16It's nothing visual and what I want to do is it's well
02:19At least it's not very visual and I want to talk about two things and with it. We're gonna wrap up this chapter and
02:25One is that I'm gonna copy and paste here just a couple of things
02:28I'm just gonna make sure that I have your just a nice little big. You know, let me put it underneath here
02:34I'll just put here a little bit of
02:36So first of all, let's start and just as a reminder two things. We said that there's the time
02:41We said that there's the seek we didn't go into the details of the differences between them really
02:46But I wanted you to really get it
02:47So for one is we have the function time the method time now the method time we set inside a value
02:53Which is numeric which is the amount of seconds in time that we want to go to
02:57The default is up for suppress events is the default is false
03:02Now what that means is if there is a pause any place between the time that we are in to the time that we want
03:08To go to it's going to stop in that pause and it's going to go through all the callbacks
03:12And in our case when we were adding pauses
03:15It was creating an error which forced us to go back in there and make sure that we're suppressing the events setting it to true
03:22Now contrary to that the seek works in a very similar way. We put a number value in seconds and
03:30The default is to suppress the events and that is the big difference between time and seek and another big difference is that the position
03:37itself could accept also values that are not specifically numbers such as a label such as
03:45You know like if we had here basically we could have sent inside a label into the seek
03:49We could have sent a label saying hey a second after that label a second before that label
03:55We could have also just set a value of you know two three seconds into plus into our timeline so or minus
04:01So we didn't have to position hard-coded values
04:05We could have said also a string which would enable us to send more
04:09Specific timing and also by default it was suppressing those events
04:13So those are two critical aspects that you want to make sure that you realize the differences between time and seek
04:19So you don't end up with bugs that will be really hard to capture now
04:23There's one more method that is called duration and the duration except it
04:28accepts basically a parameter between zero and one and that parameter between zero and one enables you to jump to
04:35A specific point in time in your timeline
04:37So if you set it to zero it would jump to the beginning if you set it to one it would jump to the end of your
04:43Animation so for example in one of our scenarios where we were
04:47Asking for the total time and total duration and sending it true
04:50We could have also very easily just jumped ourselves in the timeline to the absolute end of our duration
04:58Now I want to talk about another few things
05:00There are also differences between and that's when we're going into and I want to show that
05:05I want to show live so I'm going to go ahead into our console log
05:08And I really want to get basically the total time of our timeline so to do that
05:15I'm just going to I'm going to go ahead here and just call this total
05:19Time and
05:21I'm going to go ahead and ask from this TL inner for its total time
05:30Sorry about that
05:32Let me just mute that
05:34All right, no more messages all right, so I'm going to save that and what I want to do
05:38I'm going to put that right before I delete the actual inner timeline
05:41But I want to do this for a few other items for a few other methods
05:45So I want to do that for the total time. I want to do that also for our
05:49Total duration, so let me just copy paste it because I kind of prepared this in advance
05:53Because there is really important to see the differences between them, and there's also the total progress
05:59so those are the three total functions that give you totality of information about your
06:05Timeline that you have or the all the inner timelines as well, so I'm going to go ahead here and just
06:10Make sure that I save this and I'm going to go ahead and run our application for a second
06:15And I'm going to click here on refresh
06:17And I'm just going to go ahead and just add an item and immediately just start a new timeline
06:22And I'm going to start a new timeline, and then we're going to look at the information that's coming back
06:26So I'm going to let it have one step. I'm going to have it two steps. Let it have three steps, right?
06:32So now that we have three steps. I'm going to close that timeline, and let's take a deeper look at the times
06:37so one is you can see that for our
06:40new time is
06:42Excuse me our total time is two seconds and eighty one milliseconds our total duration is two dot eighty one as well
06:50Our total progress is one
06:53Now if I go ahead and I say all right
06:55Let me set this to be not to not a animation of two rounds how about I set it to be endlessly
07:02Animating so if I go ahead here, and I set my repeat itself to minus one
07:07Which would basically mean that it's going to go on forever
07:09And I go ahead and I click on refresh here and try this over one more time
07:13So if I add again an element put it somewhere in the middle here add a timeline move it around a bit
07:20And now it's going on forever, but I'm going to close this timeline so I could get that information
07:24We're going to get something really interesting and that's exactly where the difference is really start popping in so our total time is actually only
07:32Three seconds, but our total duration is nine nine nine nine nine nine or more or less more accurately forever
07:39And our total progress again. It's a value that means basically forever so whenever I'm actually adding in
07:48And an ever and never ending never ending at loop
07:52That's exactly where I could get information that become could become really useful for me
07:56And and for example if I add this item to my timeline, which I just did
08:01I'm pushing my timeline that is underneath it to be in position forever
08:06So if I go ahead and I try to add an animation now
08:09And I'm going to try to add that animation in and if I just go ahead here
08:12And I just try to even add an animation your add an item and I click on replay
08:16I'm not really going to see that ever happening when I'm adding another item and the reason I'm never going to see that item is because this
08:23Is happening forever and the next time I'm going to add something is going to be in the forever zone
08:27And that's not going to work
08:29And that's going to be a bug on our system unless we figure out a way to solve it
08:33And that is because this timeline is going on forever
08:36And it's the next one in our queue when we're trying to add something in and when we're trying to add a new animation
08:42in our on
08:44Where is it on add in a few different spots, but for example, let's just find that specific point in time when we're trying to add a new
08:52Animation so here we're adding a new item and we're setting it to go to a specific spot in our timeline and we're not defining
09:00Explicitly, where do we want it to go? It's going to by default go to that absolute end
09:05So if we want to come up with a solution and make sure that this actually will appear at a specific point in time
09:11That we want it to appear in
09:13We're going to have to make sure that instead of sending in the default that we're actually going to send inside the actual time of
09:19The total time that our application has of our timeline right now
09:23So I could literally just go to my get total timeline and I could ask for to
09:29Instead of it if we're looking at here for a second instead of asking for the default which is going to give us somewhere in
09:34That area I'm going to ask for the actual total time instead and if I ask for the total time
09:39I'm going to actually get that point in time where that animation actually ends initially
09:44so if I click here and I'm going to put here a total time and
09:49I send that as my second parameter and I save this and I go back into my application and click on refresh
09:56Look what will happen. So first of all, I'm going to add an item. I'm going to add a new timeline
10:00I'm going to create an endless loop close that timeline
10:04And now if I go ahead and I add another item and let's say I move it all the way down here
10:09And now I click on replay notice what's going to happen
10:14The item is actually appearing and getting added in
10:18now it's not actually continuing on from this point because we are in a
10:23it yeah, but but
10:26That is exactly the point in time where is getting a little bit confused and I'm gonna have to figure out if I really wanted
10:33To create a complete solution. I would have to figure out a way. Oh, well, probably the problem is is
10:38I'm only doing this to the actual edition of the item and I'm not doing it to the actual animation of the item
10:44Which happens at a later stage?
10:45So if I wanted the whole application to always work and also work whenever we're putting inside
10:52Yo-yos that are going on forever. I would have to literally find that specific item
10:57So any place that I'm adding or manipulating anything inside of my timeline
11:01I would probably want to go there and I would want to make sure that I'm always
11:05Approaching it into that specific point in time that I actually want it to go in so in this case when we're creating a new ad
11:11And we're not setting a specific point in time where we want to add it
11:14That's exactly our problem
11:16But I'm not gonna go through every single one of these items because I'm gonna leave that for you guys and to wrap up this
11:22Course completely I want to talk about one last topic and that is a topic of time scales
11:27So what I'm gonna go ahead here
11:29I'm just gonna add your two controllers and I'm gonna call this I'm gonna call this slow down
11:35And I'm gonna add another one that's gonna be speed up and this will be a wrap for this course
11:51Slow down and this is gonna be a wrap-up to our conversation about time in general. So I'm gonna call this on slow on
12:01speed and let's start with mr. Slow and if I go ahead here and just now I'm just gonna
12:08Go quickly
12:09goes inside of our timeline here somewhere
12:11I'm gonna go just create here a new function and I'm gonna call it on slow and
12:15Literally, I'm gonna go to that timeline, which we said we're gonna get it with get TL because now we don't want to approach directly the specific item
12:22and I'm gonna ask it to
12:25Scale its time by calling the time scale and by default the value is going to be one
12:30I want to I want to slow things up. So I'm gonna send two so it's gonna be two times as slow
12:35And I'm gonna create the same exact function and this time we're going to create it for on speed
12:42And
12:43I'm gonna go ahead and make it like a half half the speed that it would basically half the time that it would normally take
12:50Now if I save this and I add my app go back into my application click on refresh
12:54I'm just gonna add an item put it somewhere. I'm gonna add a new timeline gonna push this all the way there
13:01I'm gonna not close it but instead of that
13:03I'm just gonna click on to slow down our timeline notice
13:05well, actually the opposite I sped things up and if I want to I could slow it down or
13:10Speed it up. So I switched things around here. So this would make things go
13:16Way faster, so I'm gonna make it go slower and this is gonna make things go faster
13:22If I go ahead here and no need to refresh because we could see that that would slow it down
13:28That would make it faster and that's it. So I could literally dynamically control a lot of things with time
13:35And that's gonna be one of the things that will take you time
13:38So what you want to do is basically
13:41practice time and time will just make you really good at this and I encourage you to take the sample that we created which is
13:48crazy sophisticated and
13:51Donate a little bit of your time to figure out a bug because there's many of them because we added so many different
13:56functionalities click around and find a bug and then go ahead and try to fix it and add in the comment section and
14:02I would love to see that and if you do add a
14:06Add a solution also write down the steps involved and how did you fix it and how did you find it?
14:12And if you bring up a really great solution
14:14we'll even add it as an add an appendix to this course because I think there would be a wonderful solution and
14:21Obviously will feature your name
14:22and if you have a website will make sure that there's a link to your website whoever comes up with really great solutions because we
14:28Would love to engage you and get you to be part of this course
14:31You're not only passive learners at this stage
14:33We're after the course we're after the recordings. It's time for you to take the leadership and to show us what you know
14:40And that's gonna really help you throughout your career if you choose to do that and we'll definitely make sure that it's gonna be noticed
14:46both by the guys at
14:48Twin max and also us internally and making sure that you could then refer and say to friends
14:54Hey, not only that I take this course
14:56I actually helped and I was part of the creation of it
14:59So I thought I hope that excites you because that excites me and I hope to see some of your work
15:04And thank you so much for watching this course and we're probably gonna have a few bonus extras
15:09So don't just close your browsers check to see if there's any extras already out there. So see you soon