Repeating Animations

A repeating animation is a motion, such as a bounce or a pulse, that an element plays over and over: endlessly or a set number of times. Use it to draw attention to an element, such as a button or an arrow.

Adding a repeating animation

To add a repeating animation to an element:

1. Select the element you want to animate.
2. Open the Animations tab in the right panel.
3. Click the + next to Repeating animation to switch it on.
4. In Type, choose an animation.
5. In Repeat, choose ∞ to repeat the animation endlessly, or choose how many times it plays.
6. In Duration, enter how long one cycle of the animation takes, in milliseconds. A lower number makes the animation faster.
7. If you chose Rotate or Move, pick a direction under Direction.
8. If you chose Move or Rock, pick a strength under Intensity.

On the published page, a repeating animation starts once the element's start animation has finished. If the element has no start animation, the repeating animation starts when the element appears.

Repeating animation settings

The Repeating animation block in the Animations tab of the right panel has these settings:

• Duration: how long one cycle of the animation takes, in milliseconds. The default is 1000 (one second). A lower number makes the animation faster.
• Type: which motion the element makes. The default is Bounce.
• Repeat: how many times the animation plays. Choose ∞ to repeat it endlessly (the default), or any number from 1 to 15, or 20, 25, 50 or 75.
• Direction: appears only for Rotate and Move. For Rotate, two curved-arrow icons set anticlockwise or clockwise (the default is clockwise). For Move, a vertical and a horizontal double-arrow icon set up and down or left and right (the default is up and down).
• Intensity: appears only for Move and Rock. Four icons, showing one to four bars, set how far the element moves or tilts. More bars means a bigger movement. The default is three bars.

Repeating animation types

The Type setting of a repeating animation offers these motions. Each description is one cycle of the animation:

• Bounce: the element hops up and drops back down in place.
• Flash: the element fades out and back in, twice per cycle.
• Pulse: the element grows slightly and shrinks back, like a heartbeat.
• Rotate: the element turns one full circle around its center, clockwise or anticlockwise. The duration is the time for one full turn.
• Rubber Band: the element squashes wide, then tall, and then settles back into its original shape.
• Shake: the element moves quickly left and right.
• Swing: the element tilts back and forth, pivoting from its top center.
• Tada: the element shrinks slightly, then grows larger while tilting quickly left and right, and then returns to its normal size.
• Wobble: the element slides left and right while tilting.
• Jello: the element skews diagonally back and forth, with each skew weaker than the one before.
• Move: the element slides back and forth, up and down or left and right. Intensity sets how far it moves.
• Rock: the element tilts back and forth around its center. Intensity sets how far it tilts.

Frequently asked questions

Why is the Repeating animation block greyed out?

In a Longpage scene, the Repeating animation block in the Animations tab is greyed out while the element's Scroll path animation block is switched on. Switch off Scroll path animation to use a repeating animation instead. The Start animation and End animation blocks are greyed out for the same reason.

Why doesn't my repeating animation play for some visitors?

Visitors who have "reduce motion" switched on in their device or browser settings don't see repeating animations. The element still appears for them, without the repeating motion.

When does a repeating animation start?

On the published page, a repeating animation starts once the element's start animation has finished. If the element has no start animation, the repeating animation starts when the element appears.

Updated on: 20/10/2026