How to set play-on-show on lottie file in WEBFLOW

1

Hello, i have problem bcs my lottie animation play when i load a website but it is on second section and reveal after scroll there but is already played before and just show like normal element.

I try to use <lottie-interactive path="lotie-animation.json" interaction="play-on-show"></lottie-interactive>

but that doesnt see my file anyway.

How to set that to play animation after show animation?

2

Hello, @Investalhpinstantink

It sounds like you’re trying to ensure your Lottie animation plays only when it becomes visible on the screen. You can achieve this by using the Intersection Observer API to detect when the animation enters the viewport and then trigger the animation. Here’s a basic example of how you can do this:

HTML

<div class="animation-container">
    <lottie-player id="lottie" src="lotie-animation.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
</div>

JavaScript:

document.addEventListener("DOMContentLoaded", function() {
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            const lottiePlayer = document.getElementById('lottie');
            if (entry.isIntersecting) {
                lottiePlayer.play();
            } else {
                lottiePlayer.stop();
            }
        });
    });

    observer.observe(document.querySelector('.animation-container'));
});

This script will start the animation when the .animation-container enters the viewport and stop it when it leaves. Make sure to adjust the src attribute in the tag to point to your actual Lottie animation file.

Hope this will help you.
Best regards,
samuel898