If a design with multiple component animations inside a single frame appears to glitch, make sure transition durations are properly configured for video export

❌ Result w/ glitch

Yellow circle jumps back to start mid- animation.

✅ Intended result

Smooth perpetually looping animation with no "jumping" glitch in the yellow circle.

🔎 What causes the glitch?

When playing design in Figma player, after the design starts playing it doesn't "end" and start back over, it continues to play indefinitely until the Figma player is closed.

In an exported video, the video itself has a fixed start & end point, after which it restarts. By default, the video restarts after the longest duration nested animation has played once.

If you have two nested animations with mismatched durations, this means the shorter duration animation will restart halfway through the animation rather than at the end.

Note: This effect will also occur in similar situation where the last frame of a multi-frame animation loops back to starting frame at an incorrect duration.

⛏️ How to fix

There are three options to address this issue & create smooth perpetually looping animation:

1️⃣ Match duration timing

The simplest approach is just to set an equal duration for both animations. This will change the relative timing of the looped elements, however, so only use if animation timing is not critical.

In example below, we've shortened the total duration of the "Instance 2" animation from 4000ms to 3000ms to match duration of "Instance 1" animation.

This adjustment produces below video:

2️⃣ Extend length of animations to least common multiple duration

If animation timing is critical, you can retain the relative timing of the looped elements by adding additional variants to your component sets with the same durations, up until reach the least common multiple of the initial durations for both instances.

In our example, we've extended the total length of both nested animations to 12 seconds, the smallest multiple of their 3 second and 4 second initial durations.

This adjustment produces below video, which retains the relative timing of both animations:

3️⃣ Duplicate parent frame & set after-delay duration to least common multiple

The last option, which also retains relative timing of nested animations, is to duplicate parent frame & add looped connections with after-delay duration set equal to lease common multiple of animation durations. This eliminates the need to create new variants & transitions in your component set, so is good in cases where lease common multiple requires high number of variants be created.

In example below, we've duplicated our parent frame, and set 12 second after-delay duration (6 seconds on each connection), allowing the nested animations to play continuously for 12 seconds (least common duration multiple) before animation restarts.

This adjustment produces below video, which retains relative animation durations:

Additional reference material

Here is the Figma design file with source designs from examples above.