1. Introduction

Download the completed project.

In this tutorial we'll look at timelines, the way to define custom animations between states.

Here is an example of a timeline created between two states being played.

In a previous tutorial we looked at how to create simple animations using controllers and states. This tutorial will build on that using the completed project, so make sure you've watched it if you haven't already.

2. Creating a Timeline Between States

In the project we already have a controller with two states. We can see the simple animation defined by the states by switching between them like this.

We can customize this animation by creating a timeline between these two states.

To create a timeline between the two states we right click on the 'left' state then 'Add Timeline > right'. This adds a timeline that defines the transition between the 'left' and 'right' state.

Once done, a dropdown arrow appears to the left of our 'left' state and our new timeline appears below it. Clicking on the timeline takes us to the timeline view.

3. The Timeline View

The timeline view in the center of the screen is used to modify the timeline. The left-most diamond on a row represents the starting state's value, while the right-most diamond represents the destination state's value. In our case the left-most diamond represents the plane in itsĀ 'left' state and the right-most diamond the plane in its 'right' state.

The diamonds in the timeline view represent keyframes, a value for a property at a specific time along the timeline.

4. Transitions and Interpolation

Most properties can be transitioned from one keyframe to another, represented by the solid block between the keyframes.

If we right click on this transition block we can change the interpolation type of the transition. Previews of the different transitions are provided to give you a good indication of what the animation will look like after applying the interpolation. Let's pick one of the bounce interpolations and see what it looks like in the timeline.

Some value types (such as true / false properties) can't be transitioned and thus cannot have blocks, but can still have keyframes.

5. Adding Keyframes

We can drag the time handle to change the timeline's current position and this will be reflected in the scene view. Keyframes can be added by positioning the time handle then changing the property in the scene view or properties table.

Let's move our timeline handle to somewhere roughly in the middle and move the position of our plane within the scene. This will create a new keyframe at that point along the timeline with the new position values, and will split our transition block into two seperate transitions.

With the timehandle in position you can also add a keyframe by right clicking and selecting 'Add keyframe at current time'. This is useful as it lets you create a keyframe without altering any properties.

6. Previewing the Timeline

We can preview the timeline using the play button on the toolbar. Make sure the timeline handle is at the beginning as the timeline will play from the handle's current position.

In the previous tutorial we triggered the state animation by calling the activate function from a script node, when the user pressed down on the plane. We don't have to make any changes to this - Zappar will automatically use the timeline we've created to move from the left state to the right state when it's activated.

7. Playing Timelines Backwards

If we were to go in the opposite direction, from the 'right' state activating 'left', then by default this timeline will play backwards.

If we wanted to define a different animation for the right to left transition then we would right click on the state 'right' and create a new timeline to state 'left'.

For a full set of the rules used by Zappar when determining which timeline or state animation to play, please see the Timelines article within the Getting Started section of the documentation.

The thin lines between keyframes on a timeline are known as links. Changing the value of a keyframe also changes the values of any linked keyframes. In this example the left state is linked to the keyframe at the beginning of our timeline, so when we change the position value of the left state, the keyframe and transition block are updated automatically.

Links are a great time saving method as they allow you to edit a value in one place and have that change reflected in the linked keyframe of a timeline. They are also useful for creating sections of animation where object values remain unchanged before changing again at a later point along the timeline.

9. Timeline Controls

As well as the ability to play a timeline using the toolbar we can also:

  • Loop the timeline so that it starts again once it's finished.
  • Skip to the beginning and end of the timeline.
  • Move through the timeline frame by frame.

If we want to make the timeline longer or shorter we can increase or decrease the length of our timeline using the number box on the toolbar. The length is the time in milliseconds the timeline takes to complete.

If the timeline is longer than the width of the timeline view, then you can either scroll horizontally, or zoom out using the zoom slider in the toolbar.

10. Creating a Standalone Timeline

Sometimes we want to define an animation without worrying about the start and end states. For this purpose we can create a 'standalone' timeline.

We can do this by right clicking on a controller (rather than a state as before) and selecting 'New Timeline'.

To play a standalone timeline during your zap, we can drag it into a script node and call the play function.

11. Next Steps

Download the completed project.

That completes our look into creating more complex animations using timelines.

We hope this tutorial was helpful and urge you to take a look at the Timelines articles in the Getting Started section, as well as our reference materials.

If you have any issues feel free to get in touch, we're support@zappar.com.

Open in new window