Tweening timelines
Just like every other object in JavaScript so are the properties of tweens and timelines animatable. In this lesson, we will fast forward and fast backwards whereever we want to go in our TimelineMax timeline using a simple little TweenLite.
Video Transcript
00:00All right, so something incredibly cool. We're gonna actually take our timeline and tween it
00:06Because really everything is tweenable even timelines are tweenable
00:10So we're gonna take our any I've been a tween light and tween our timeline max
00:14Because we could just approach our specific property and just animate that property and it's gonna create the animation
00:20Incredibly cool
00:21That is about it. So let's see it in action. It's short. It's sweet
00:24We're gonna do it with our back and next and I think it's incredibly thin spaghetti and cheese
00:30well, I don't know because I just had spaghetti and cheese and it was wicked but I
00:36Can't give you spaghetti and cheese through the monitor unless you have spaghetti and cheese at home
00:39And then I welcome you to take a spaghetti and cheese break
00:44Until then let's see something really cool
00:46We're getting really really close to the end of this chapter and the end of this course really and I wanted to show you
00:52What you could do a timelines, which is crazy
00:54You could actually animate timelines and we're gonna do that instead of having our backs at back and next where it would jump to a specific position
01:01I deliberately left it in a separate video
01:04What I wanted you to do is go back to your on back and on next and I'm gonna cancel out that seek and instead of
01:10Creating a seek. I'm literally just gonna create a new tween light and I'm gonna animate it yo to
01:17The timeline itself as is gonna be the item that I'm animating
01:21I'm literally taking control over the timeline and I'm gonna have it animate for 0.2 seconds
01:27And what properties do I want to animate? I want to animate the time property, which is a getter setter function
01:33Which basically means that it will work
01:36Because we're loading up the timeline max which has also the properties remember we if if you recall from a previous course
01:44Whenever we want to animate properties getter setters and such we have to have the properties plug-in
01:51Configured which we do because time
01:53Because tween max has that built-in already by default
01:58so if we go ahead here and just continue down the line and
02:02Save this that's all I really have to do to get it to work
02:05And I'm just gonna go ahead here because we have already the time there
02:08I'm just gonna go ahead and do this also for our on next and we'll test it out to see if it's working
02:12and if I save this and just literally we're taking control over the timeline and
02:17Animating it outside of the timeline, so it doesn't even matter if there's any pauses in the middle
02:21It's gonna run through it no matter what so if I go ahead here and save this
02:25And click on refresh here and create a few timelines so we could test it out
02:30So we're gonna create a few labels that is that was a hint to the next lesson
02:35which will be the last lesson about multiple timelines and
02:39But that we're going to talk about that in the next lesson, but now that we've set the next all these buttons which
02:45Just by clicking on back is gonna animate back animate back animate next have her a little error here
02:52Time is not defined because I probably didn't define time there. So let's see what the actual time of
02:58It would be and the time of it would be as we already have the label, but we actually need to get the time
03:05So I'm gonna go ahead and just grab that variable as well and send it right in here
03:10So we'll have access to the actual time as well and the next will work as well
03:14And that is it for this lesson. Oh, you know what? No, that's not that is it because I wanted to show you another something
03:20Is that not only will this work, but you could do anything you could with an ease
03:25Anything you could do with the tween so you could literally also add eases such as let's say we'll add a bounce
03:31ease in out, how about that and
03:35Literally anything you could do a tween you could do to the timeline as a tween as well
03:39So if I just click your refresh, oh
03:41Add the items really quickly create a label
03:46Create another label and
03:50Create one last label and if I go ahead and click on back, it's gonna go back without any ease
03:56I click on next it's gonna go with an ease, but we can't really see these because it's such a fast animation
04:02So let me bump it up. So it'll be three seconds. So we'll be able to see it and
04:06Last last time that we're doing a refresh and I'm just gonna go ahead here and just let's just call this one
04:13and
04:14Excuse those bikes if you could hear them in the background and three. All right, so if I click on back
04:20It's just gonna go back if I click on next it's gonna have this bouncy bounce effect going on to it as it's moving in and
04:27literally could create crazy animations this way and that's it about this lesson and we're getting close to the last last last episode of
04:35this course and of this chapter and the next lesson we're gonna take a look at
04:40Timelines that live inside of timelines basically nested timelines very cool stuff. See you in the next lesson