(Last Updated On: August 12, 2021)

Looping an animation makes it repeat again and again. In this tutorial, you will learn how to loop animations by using timeline triggers in Saola Animate 3.

This tutorial covers:

  1. How to Loop Animations in a Scene
  2. How to Loop a Whole Document

Loop Animations in a Scene

By default, animations in a scene play forward once. To loop them, you can set a timeline trigger at the end of the last animation. Then, the trigger will play the timeline again when it reaches its end. Take the following steps to loop animations in a scene: 

Step 1: In the Timeline pane, move the Playhead to the end of the animation having the greatest ending time. You can also press the END key or click the Go to End button (1).

Set timeline trigger to the end of an animation

Step 2: Press ALT+T or click the Insert Trigger button (2) on the Actions bar. This opens the Timeline Triggers dialog where you can define a trigger.

Step 3: In the Timeline Trigger dialog, click Add Action (3) > Timeline > Start Timeline. In this case, the target object is the main timeline.

Add Timeline Triggers

This attaches the Start Timeline action to the trigger (4), making the timeline automatically replay from the beginning as soon as it ends.

Loop animations using timeline trigger

To see your animations loop in action, you can preview it in a browser or use the Loop Playback button (5) in the Timeline pane. Be aware that the Loop Playback option loops only in the editor, not when the document is exported.

Note: You can use the Complete timeline event to loop the current timeline. Just click the Timeline Event Handlers button (6) and add the following event – action: CompleteStart Timeline.

Loop a Whole Document

Apart from looping a single timeline of a scene, you can also loop all scenes in a document as follows:

Step 1: In the Timeline pane, go to the last scene in a document. After that, move the Playhead to the end of the last animation on the main timeline.

Step 2: Press ALT+T or click the Insert Trigger button on the Actions bar. This opens the Timeline Triggers dialog where you can define a trigger.

Step 3: Click Add Action > Symbol > Start Symbol. The target object can be the main document or any symbol you want.

Start Symbol action

Note:

  • Similar to looping a timeline, you can also use the Complete Timeline event to loop animations in the whole document. Just add event actions (CompleteStart Symbol) to the main timeline of the last scene in the document.
  • You may want to alternate forward and backward playback direction during a loop. In other words, the animations will play forward and then in reverse.  To do that, set the playback direction to Backward. You can also change the speed of the reversed animations by selecting a speed other than 100%.
Alternate forward and backward playback direction
  • In addition, it’s possible to loop animations back to a certain point on the timeline instead of returning to the beginning. Just use the Continue Timeline/Symbol From action. Then, specify the point where you want the animations to loop back using time in milliseconds or labels.

That’s it! So, you now have a loop within your animations. Feel free to try out Saola Animate and ask us if you need any help.

Related Articles:

Use Events – ActionsUse Timeline Triggers
Use Multiple TimelinesCreate and Call JavaScript Functions
Create Timeline LabelsCreate Hover Effects
Control Video and Audio PlaybackUse Symbols to Reuse Animations