The Timeline

The timeline is used to design animations using durations, delay, and animation curves. You can use it to choreograph animations tied to a certain trigger event.

How to use the Timeline

1. You can open the Timeline by clicking on the ‘timeline’ icon on the top right side of the State Machine. It will appear on the right side of the State Machine

1. The timeline shows the state transitions that are triggered by the selected object. In the example, the apple goes from ‘Base State’ to ‘Orange’ when you click on ‘Box’ (on pointer down). Because ‘Box’ is the trigger object, and the filtered event is ‘On pointer down’, the Timeline will show all animations that are tied to that trigger.

1. Using the timeline, you can change the duration and delay of each animation by dragging the ‘diamonds’ on either side of the timeline row

1. You can click on the timeline row to open animation settings. In this popover, you can choose the animation curve, easing type, and enable loop and ping pong for this animation.

Filtering trigger events

To filter animations by trigger event, click on the dropdown beside the object name in the timeline. Events that have animations tied to them will have a little dot to the left of the event.