Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

The `playSegments()` plays the whole animation before playing the segment

See original GitHub issue

Tell us about your environment

Browser and Browser Version: MacOS Chrome 79.0.3945.130
After Effects Version: N/A

What did you do? Please explain the steps you took before you encountered the problem. I’ve created a playground to demonstrate the bug:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<div id="lottie"></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.min.js" type="text/javascript"></script>

<script>
window.animation = window.lottie.loadAnimation({
	container: document.getElementById('lottie'),
	path: 'https://assets8.lottiefiles.com/packages/lf20_kcTWGc.json',
	renderer: 'svg',
	loop: false,
	autoplay: false,
});

</script>
</html>

Now I can use the globally available animation. The animation is stopped at the frame 0;

I want to play the segment:

animation.playSegments([0, 24]);

What did you expect to happen? I expect animation to play the range 0..24 and stop.

What actually happened? Please include as much relevant detail as possible. The animation is played entirely before the requested segment plays.

Please provide a download link to the After Effects file that demonstrates the problem. https://assets8.lottiefiles.com/packages/lf20_kcTWGc.json

Additional details and workaround It appears that there’s a bug with how totalFrames is handled.

I’ve found at least two ways to overcome the issue:

Resetting the totalFrames:

// BTW 0 does not do the trick as it's considered falsy
animation.totalFrames = 1;

Skipping to the end:

animation.goToAndStop(animation.totalFrames, true);

Sticking with the last one as it feels less hacky, but it would be nice to see an explanation and a fix for this.

This issue is similar to https://github.com/airbnb/lottie-web/issues/318, in which it is advised to wait for the DOMLoaded event, but to be honest, I don’t get it. First, in the example above I’m executing the command in the dev console when the animation is definitely loaded and mounted. Second, I’m using the react-lottie package which wraps the animation with React component and plays segments on every props update. In order for it to work, I had to apply my workaround like this:

import Lottie from 'react-lottie';

const Component = ({ animationOptions, segmentsToPlay }) => {
	const animation = useRef(null);

	const onLoaded = () => {
		const { anim } = animation.current;

		anim.goToAndStop(anim.totalFrames, true);
	};

	return (
		<Lottie
			options={animationOptions}
			ref={animation}
			segments={segmentsToPlay}
			eventListeners={[
				{
					eventName: 'DOMLoaded',
					callback: onLoaded,
				},
			]}
		/>
	);
};

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:9

Top GitHub Comments

6reactions

bodymovincommented, Feb 24, 2020

I’ve added a property initialSegment when loading an animation that should solve this case https://github.com/airbnb/lottie-web/wiki/loadAnimation-options#initialsegment

3reactions

bodymovincommented, Jan 31, 2020

Hi, you probably want to pass the second argument as true https://github.com/airbnb/lottie-web#playsegmentssegments-forceflag

Top Results From Across the Web

How To Play Segments Of Lottie Animations - YouTube

Segments of Lottie animations can be played using the playSegments function of Lottie-web. You can play different segments of your animation ...

Issue when playing animation segments through javascript

On the click of a button I want to play specific segment of animation, but on first click animation is playing in full...

Lottie how to run arbritary code inbetween two segments?

Play segment -> do something -> play another segment ... This will run the console.log() after the second segment is complete.

How to use lottie animations on the web | by Idorenyin Udoh

We want to play a complete sequence of the washing of the hands. So instead, we use the playSegments([segments, forceFlag]) method.

Lottie | Lottie for React

play() · stop() · pause() · setSpeed(speed) · goToAndPlay(value, isFrame) · goToAndStop(value, isFrame) · setDirection(direction) · playSegments(segments, forceFlag).