play() after setFrame() resets the animation

[Rapsssito]

Overview

Using @lottiefiles/dotlottie-web, calling play() after setFrame() resets the currentFrame property and restarts the animation from the start. This does not match the documentation for play(): Begins playback from the current animation position.

import { DotLottie } from "https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web/+esm";
(() => {
// Get lottie player and set the animation to play from half way through when finished a loop
const canvas = document.getElementById('hero-lottie');
const player = new DotLottie({
autoplay: true,
loop: false,
canvas: canvas,
speed: 1,
src: canvas.getAttribute('data-src'),
});
// Get loopFrom attribute
const loopFrom = parseInt(canvas.getAttribute('loopFrom'));
player.addEventListener('complete', () => {
    player.setFrame(loopFrom);
    player.play(); // Here the animation resets to the frame 0
});
})();

A workaround is to call player.setFrame() after play().

[theashraf]

Thank you, @Rapsssito, for bringing up this issue, will address it in future releases.

But If you're looking to loop through a specific part of the animation, say from loopFrom to the end of the animation, you might consider using the setSegment method. Here's how you can implement it:

import { DotLottie } from "https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web/+esm";

(() => {
    const canvas = document.getElementById('hero-lottie');
    const player = new DotLottie({
        autoplay: false, // ensure autoplay is false, so the player doesn't start rendering on load 
        loop: true, // ensure loop is set to true
        canvas: canvas,
        speed: 1,
        src: canvas.getAttribute('data-src'),
    });

    const loopFrom = parseInt(canvas.getAttribute('loopFrom'));

    player.addEventListener("load", () => {
        // Set the animation segment to play from 'loopFrom' to the last frame
        player.setSegment(loopFrom, player.totalFrames);
        // Start playing the animation
        player.play();
    });
})();

[Rapsssito]

@theashraf, thanks a lot for the suggestion! I did not know about the setSegment() method.

[theashraf]

@Rapsssito This issue has been fixed in the latest dotlottie-web@0.21.0