Creating a yo-yo on speed
Just like TweenLite didn't have a built in mechanism for yo-yo effects (while TweenMax did), such is the case with TimelineLite (vs TimelineMax). With that said, in this lesson we are going to re-create the yo-yo effect of a timeline and speeding-up its animation as we scale the speed of the animation of the timeline.
Video Transcript
00:00So I'm going to go ahead and add that onReverseComplete.
00:06And we'll call the, let's give it a name,
00:08so I'm just going to copy the same name,
00:10and I'll just call it onTimelineReverseComplete.
00:15Go ahead and just paste that right underneath
00:17our function onComplete,
00:19and I'm just going to duplicate that function,
00:22change the function's name to our onTLReverseComplete,
00:26and I'll just add here, we are back in the start,
00:31and we could even have your maybe play,
00:36and maybe we'll want it to play over again
00:38instead of reverse.
00:39So in theory, we should have our animation
00:41going back and forth forever.
00:43What would be really nice if we could speed up our animation
00:46because it's going to take forever for us to actually see it,
00:49and we're going to see how to do that right now
00:52because we don't want to watch this animation take forever,
00:54so I'm going to go to my TLL,
00:56and I'm going to call the scale time,
00:58which we talked about it really briefly
01:00with the timeline light and max,
01:03we could actually scale our time and give it a value
01:06and say, hey, I want it to be five times faster
01:08than what it actually was.
01:10So if I save this and I run it,
01:12and let's just go over the properties one more time,
01:14I've set an onComplete,
01:16which basically when it completes, it will reverse.
01:18I've set an onComplete reverse,
01:20which in that function, we are playing back again,
01:22and we should see that trace.
01:24And also, I went to my progress in the beginning,
01:26set it to start from 70%, the first time it's running,
01:30and then sped up our animation to be five times as fast
01:34as its normal duration.
01:36So let's give it a roll, and let's see what happens.
01:38So we can see that our animation is way faster now,
01:40and it's going back and forth forever,
01:42and you can see that we have here this yo-yo effect,
01:44which obviously would be a lot easier
01:46if we just had the command yo-yo or the property yo-yo,
01:49which is only available from tween timeline,
01:53well, timeline tween max, ah, timeline max.
01:57All right, so before I get an epileptic shock,
02:00let me stop that, and that covers the basics
02:03and functionalities that are inside of the timeline light.
02:07Probably gonna talk about a couple of more stuff,
02:09but we've covered most of the features,
02:11and really a lot of the properties
02:12when you're gonna see them inside of the documentation
02:14are gonna be incredibly similar
02:16to the ones that you'll find actually
02:18in all the videos that we covered in our earlier lessons.
02:22So just jump into the documentation itself
02:24instead of us going through every single property,
02:27because most of them are gonna be very, very intuitive.
02:29In the next lesson, we're gonna look at a few stuff
02:31that might be a little bit surprising
02:33and see how they work,
02:34stuffs that are completely new to timeline light,
02:37which didn't exist for our tween light,
02:40tween max type of functionalities.