Find out with velo when a Lottie animation is loaded or finished?

Ask the community
,
1

Does anyone know if Velo Code (no custom code) can be used to find out exactly when a Lotti animation has finished loading or once the animation has finished playing? And How?

it’s about Wix Studio

When you visit my site I want to install a pre-loader that plays a 75 frame lottie animation and then the container in which the animation is should be slid up. But since the loading of the Lottie loads at different speeds depending on the user, I cannot work with fixed numbers (e.g. 4 seconds), otherwise it will slide up too quickly or too slowly

I already have it with if (lottieElement.rendered) then lottieElement.onViewportEnter() then lottieElement.play() then a setTimeout and in it the upslide function. But it does not work.
Maybe someone has a tip for me?

This is how it should look

ScreenRecording_12-13-2024 21-20-44_1

2

This setup solves one problem, it will always wait for the animation to start playing before kicking off the delay, which should keep it synced better. The problem is, if there’s any lag during the animation itself , it could still end up collapsing before the animation is done. Definitely test it thoroughly to make sure it holds up under different conditions.

$w.onReady(function () {
    const lottieElement = $w("#lottieAnimation");
    const container = $w("#container");

    const totalFrames = 75;
    const frameRate = 30;
    const animationDuration = (totalFrames / frameRate) * 1000;

    lottieElement.play();

    setTimeout(() => {
        container.collapse();
    }, animationDuration);
});
3

Thank you! Unfortunately, this does not completely solve the problem, but it is a little better.

1 Like