Loop, Pause and Resume Lottie Animations

How do I loop, pause and resume a Lottie animation?

Short answer

Set loop to true (or a number of loops) when you load the animation, and call pause() and play() to stop and resume it. In lottie-react use the loop prop and a lottieRef; in Jetpack Compose pass iterations = LottieConstants.IterateForever and an isPlaying flag. To loop only part of an animation, use playSegments.

lottie-web

const anim = lottie.loadAnimation({ container, renderer: 'svg', loop: true, autoplay: true, path: '/wave.json' });

anim.pause();               // freeze on the current frame
anim.play();                // resume
anim.stop();                // back to frame 0
anim.goToAndStop(30, true); // show frame 30
anim.playSegments([60, 120], true); // loop frames 60-120

React (lottie-react)

const ref = useRef(null);
<Lottie lottieRef={ref} animationData={wave} loop />
<button onClick={() => ref.current?.pause()}>Pause</button>

Jetpack Compose

val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.wave))
val progress by animateLottieCompositionAsState(
  composition,
  iterations = LottieConstants.IterateForever,
  isPlaying = isPlaying
)
LottieAnimation(composition, { progress })

Loop only the idle part

A common pattern is an intro that plays once, then an idle section that loops. With playSegments you can play the intro segment, wait for complete, then loop the idle segment. Ask your designer to mark the frame numbers.

Pause animations that are off screen with an IntersectionObserver on the web. Looping animations that nobody sees still use CPU and battery. Also respect prefers-reduced-motion and give users a way to stop looping decoration.

Frequently asked questions

What is the difference between pause and stop in Lottie?

pause() freezes on the current frame. stop() resets to the first frame.

How do I loop a Lottie a set number of times?

In lottie-web pass a number to loop, such as loop: 3. In Compose pass that number to iterations.

Why does my loop have a visible jump?

The first and last frames do not match. Make the end pose equal to the start pose in the source file.

Should loading animations loop forever?

Only while loading. Stop or switch to a success or error state when the work finishes.

A little space for good ideas.