How to control a lottie animation with buttons

Alejandro Alonzo 0
Viewed 19

I've been trying to control a Lottie animation with buttons, I need the first button to take me to the start of the animation, the second to the middle, the third to later and so on. The animation that I have downloaded for testing is with markers that I am trying to access and go to that frame in the animation, but I can not do it. The animation must also be controlled with scroll forward or backward.

Only the START button works at the moment.

LottieInteractivity.create({
    mode:"scroll",
    player:'#vpfxlbmm',
    actions: [
        {
            visibility:[0,1],
            type: "seek",
            frames: [0, 300],
        },
    ]
});
    
    let player = document.querySelector("lottie-player");
    let play = document.querySelector(".start");
    let year1980 = document.querySelector(".year1980");
    let year1990 = document.querySelector(".year1990");
    let year2002 = document.querySelector(".year2002");
    let stop = document.querySelector(".stop");

    play.onclick = function () {
        player.play();
    };
    
    year1980.onclick = function () {
      //"progress" is the marker in animation
         player.goToAndPause("progress");
       
    };

    stop.onclick = function () {
        player.stop();
    };
<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<button class="start">Start</button>
<button class="year1980">1980</button>
<button class="year1990">1990</button>
<button class="year2002">2002</button>
<button class="stop">Stop</button>

lottie animation javascript
1 Answers

LottieInteractivity.create({
    mode:"scroll",
    player:'#vpfxlbmm',
    actions: [
        {
            visibility:[0,1],
            type: "seek",
            frames: [0, 300],
        },
    ]
});
    
    let player = document.querySelector("lottie-player");
    let play = document.querySelector(".start");
    let year1980 = document.querySelector(".year1980");
    let year1990 = document.querySelector(".year1990");
    let year2002 = document.querySelector(".year2002");
    let stop = document.querySelector(".stop");

    play.onclick = function () {
        player.play();
    };
    
    year1980.onclick = function () {
      //"progress" is the marker in animation
         player.goToAndPause("progress");
       
    };

    stop.onclick = function () {
        player.stop();
    };
<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<button class="start">Start</button>
<button class="year1980">1980</button>
<button class="year1990">1990</button>
<button class="year2002">2002</button>
<button class="stop">Stop</button>

Partho ray0
Related