To play a specific segment of a Lottie animation, you can use the playSegments() method. Here is an example of how to use it:
// Get the animation container element
const animationContainer = document.getElementById(‘animation-container’);
// Load the animation data
const animationData = {
container: animationContainer,
renderer: ‘svg’,
loop: false,
autoplay: false,
path: ‘animation.json’
};
// Create the Lottie animation instance
const animation = bodymovin.loadAnimation(animationData);
// Define the start and end frames of the segment to play
const startFrame = 30;
const endFrame = 60;
// Play the segment
animation.playSegments([startFrame, endFrame], true);
In this example, we first load the Lottie animation data and create an instance of the animation. We then define the start and end frames of the segment we want to play, and call the playSegments() method with these parameters. The second parameter true indicates that the animation should play in a loop.
Note that the playSegments() method takes an array of two numbers, which represent the start and end frames of the segment to play. If you want to play multiple segments, you can pass an array of arrays to the playSegments() method, where each inner array contains the start and end frames of a segment.