Working with relative timelines

We've been working with absolute timelines thus far, which is the default when animating on any timeline. What that means is that when we animate an element on a timeline, there is a clear starting and stopping position point that is absolute within the timeline. Suppose that we want an element to animate to a particular place within the scene, then depending on the next interactions of the user, we want the element to animate to another point in the scene starting from where it last stopped. That's where Relative Timelines come into play. Let's begin by opening the Relative Timelines start file.

What we're going to do first is we're going to create a timeline that will animate the jet of Los Angeles to Chicago. another timeline that we'll animate the jet from Los Angeles to Dallas. And a third timeline that we'll animate the jet slightly near the Los Angeles pushpin so as to connect any other relative timeline to it. And I'll explain more on that when we get to that step. Scroll to the main timeline drop down menu and insert a new timeline and call it Chicago. Or record and able the timeline and go to two seconds on the playhead.

And move the jet over to the Chicago push pin. And select the animation path, turn it into a motion path, and arc it slightly. Let's jump to the beginning and press play to test the scene inside of Hype. Next, let's create a timeline for Dallas. Record enable this timeline. Go to, say, somewhere around one and a half seconds. And move the jet over to the Dallas pushpin. Last thing we'll create a timeline for Los Angeles. I'll go to the two second mark and just move the jet slightly.

We need to animate over a certain span of time however slightly because it's the only way that we can connect one point of a relative timeline to that of another. The next step we need to do is attach actions to the push pins of the cities in order to trigger those timelines. So let's select Chicago. Go to the actions inspector, select the action of start timeline for Chicago. Next, let's select Dallas, start the timeline for Dallas. Lastly we'll select Los Angeles and then start the time line for Los Angeles.

Now let's preview this in a browser and see how they behave as absolute time lines. You'll notice that clicking on Chicago and then Dallas resets the position of their time lines to the beginning, which essentially puts the jet back at Los Angeles. Let's go to the scene inspector, and down below you'll notice that we have our animation time lines from the main time line, to the cities, their duration, and of course we have a check box for relative. Well, let's check Chicago, Dallas, and Los Angeles, and make those relative timelines.

And then let's preview this in a browser and see how the behaviors have changed. I'll click on Chicago first, next Dallas, and then Los Angeles. You'll notice that this has some drawbacks depending on the type of artwork that you're working with. As you can see, we can't flip the jet to another direction when going back towards where it began. Keep in mind that relative timelines need to be assigned in the scene inspector or they remain the default of absolute. The key frames on the relative timelines take into account the position of elements on other timelines.

Thus creating smooth animations that traverse elements across timelines as we just created here. All the concept might not be immediately clear, I would recommend watching this movie again and try to recreate this file on your own.