HERO HELP

Timeline

Adding an animation to an element:
- Add element to timeline
- Add an animation track for the desired property (e.g. x, y or opacity)
- Double click on the animation track where you want to add the animation tween
- Tweak start and end values and optionally set an Easing type
You can create mutliple animations for a single element
Every animated property gets its own animation track
There is also a special Timed Actions track to add pauses and scripts to the timeline at a specific time
Preview/Export to see the animations in action (see Preview)

Animation Timeline

The Animation Timeline is an addition to the pre-built Effect System. Use the Animation Timeline for more complex and time sensitive animation choreographies.

How to use the Animation Timeline

Using the Animation Timeline is pretty straight forward:

Make sure you have created the artboard to a Hero Scene (see Hero Scene)
Add the element you want to animate to the timeline
Add an animation track for the desired property (e.g. x, y or opacity)
Double click on the animation track where you want to add the animation tween
Tweak start and end values and optionally set an Easing type
Optionally tweak the duration of the animation by dragging the end segment of the tween
To move the animation in time simply drag it horizontally

Controlling the timeline

There are two ways to control the timeline at runtime:

Via Timed Actions track

If you want the animation to stop at a specific time you can simply set a pause markers on the Timed Actions track by double clicking the track.

Via user interaction (action/script)

You can add an action to any element to control the timeline playback. Common use case is to control the timeline on click trigger.

Example: Pausing the timeline on click

// On element click
scene.timeline.pause();

Example: Play (resume) the timeline on click

// On element click
scene.timeline.play();

Example: Restart the timeline on click

// On element click
scene.timeline.play(0);