如何用按钮控制乐天 animation

Question

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>

Answer 1

 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>