The Animation Timeline is used alongside the State Machine to create interactive scenes. Please familiarize yourself with the State Machine before implementing Animations!

​
Using the Timeline [missing gifs]

1

Opening the Timeline

  1. Select the State Machine button in the bottom bar to open the State Machine panel

  2. Select the Timeline icon on the top right of the State Machine panel

  3. The Timeline panel will open in the right half of the State Machine panel

2

Understanding the Timeline

The Timeline shows what State transitions are triggered by a selected object.

In the example below, the apple moves from ‘Base State’ to ‘Orange’ when ‘Box’ (on pointer down) is selected. ‘Box’ is the trigger object and ‘On pointer down’ is the filtered event. This means the Timeline will show all Animations tied to that trigger.

3

Setting duration and delay of the Animation

Drag the diamond icon on either side of the Timeline row to change the Animation’s duration and delay.

[gif]

4

Animation settings

Select the Timeline row to open the Animation settings. Use the settings popover to customize the following parts of the Animation:

  1. Curve type

  2. Easing type

  3. Toggle Looping on/off

  4. Toggle Ping Pong on/off

[gif]

​
Filtering Animations by trigger event [missing gif]

  1. Open the Timeline panel inside the State Machine panel

  2. Select the dropdown next to the object name in the Timeline

  3. Select a trigger event from the dropdown. Events with a small dot to the left of their name have an Animation tied to them

  4. All Animations tied to the selected trigger event will appear in the Timeline

[gif]

​
Previewing a Timeline object’s ‘from’ and ‘to’ states [missing gif]

  1. Open the Timeline panel inside the State Machine panel

  2. Find the object’s row in the Timeline

  3. Find the State Transition column

  4. Click on the State names inside the column (in the example image, the ‘from’ state is “Base State” and the ‘to’ state is “State 1”)

[gif]

State MachinePlay Mode