02Geek HTML5 and JavaScript, TypeScript, React, Flash, ActionScript online School
Previous VideoNext Video

Animating timelines

Just like any other object that has properties, so can the timeline be animated. This is a very powerful concept the idea of animating a cluster of animations. In this lesson, we will see how to animate the timeline itself.

Video Transcript

00:00Have no fears because chapter 7 is drawing near to its end. There's two more topics
00:06I want to talk about one will be in this section and the next will be in a separate video. So let's get started
00:12So the next topic I want to talk about regarding timelines is the fact that you could actually animate a timeline
00:19So I want to show you how could you do that?
00:21So I'm gonna go ahead back to where we we just created two timelines and put them inside of a main timeline
00:27Next thing I'm gonna do is I want to actually go to that timeline and create a tween light to it
00:33And what I'm gonna do is I'm gonna send that timeline TL main as the parameter instead of a visual object
00:40I'm gonna give it a 10 seconds because I'm gonna animate our animation
00:44Inside of an inside of an animation. How crazy is that? All right
00:49So next step is I'm gonna go and I'm gonna animate the property progress
00:53Which is one of the properties of the TL main and you should check any property that is actual numeric property
01:00You could actually animate. So in this case the progress goes from 0 to 1 so I'm gonna animate it from progress
01:06Oh, there's too many S's there
01:08progress
01:09So I'm gonna animate it from 0 where it's at in the beginning to 1
01:14Now if I just run it this way
01:16All we're gonna see is that our animation will take 10 seconds instead of taking whatever amount of time it originally would have taken
01:23But what I want to do next is
01:25Beyond that is I want to actually add some more eases to it
01:29So you can see that right now it has an ease because by default every tween has an ease and you can see how it's slowing
01:35Down as the animation gets nearer to its end
01:39But what I really want to do is I want to add here some sort of a funky
01:42Tween so to do that I'm gonna add an ease so to do that
01:45I will go up here and import that ease and once I let me tell Dumbledore Dumbledore in a minute
01:51My cat is trying to escape the room, but we're in the middle of a recording
01:55So we're gonna let him wait for a bit
01:56So I'm gonna I'm gonna go for a bounce just so you could see how cool this effect is
02:01And now once I've imported. Oh my god
02:05It's so confusing when your cat is tapping your foot asking you to leave the room, but we'll we'll brave on
02:11bounce
02:13ease out
02:14There you go. So all we almost almost in a second Dumbledore. That's the name of my cat
02:19All right, so we have your about ease out and I am going to publish this and look how crazy cool
02:26This animation is and all literally all we did was
02:30Take all of our animations and just animate them using the tween light
02:34So you can see how that bouncy bouncy bouncy bouncy bouncy thing just happened there. I'll do it one more time
02:40Which I think it's crazy cool
02:43Absolutely crazy cool. So that's that's a really powerful feature that you could do with animations
02:47And that's it and I'm gonna let Dumbledore out because he's really wants to get out and in the following video
02:53we're gonna wrap up this whole topic of timeline light with a
02:57Going through a lot of functions really quickly, but stuff that will be really really easy. So it's gonna be a quick
03:02ease into chapter 8

Ready to Level Up Your Skills?

Join thousands of learners on 02GEEK and start your journey to becoming a coding expert today!

Enroll Now for Free!