Loop animations

Looping an animation causes it to repeat. You can loop animations in Advanced mode. Each element's animation can be looped separately, or you can loop a more complex animation involving multiple elements.

Loop the animation for a single element

Looped keyframes show as translucent copies on the timeline. In the example below, the red-div element has a 0.5-second-long animation that loops to play 4 times in total.

You can preview the looped animation on the stage by clicking Play in the timeline.

Loop the animation for multiple elements

You can add an event to loop all animation on the page, starting and ending at the times you specify.

1. Set a timeline label where you want the animation loop to start:
   1. Right-click the Events track (the first row of the timeline) where you want the animation to start looping, and select Add label... from the pop-up menu.
   2. Enter a label name such as loopStart in the pop-up dialog.
   3. Press Enter.
2. Right-click the Events track where you want the animation loop to end, and select Add event from the pop-up menu.
   
3. Double-click the event marker to configure the event:
   1. For the Action, choose:
      • Timeline > gotoAndPlay for infinite looping.
      • Timeline > gotoAndPlayNTimes for a specific number of loops.
   2. For the Receiver, choose the page.
   3. For the Configuration, select the label you created earlier (for example, loopStart) and set the number of times you want to repeat.

Use the Preview button to see how your looped animation behaves in a browser.