Как исправить ошибку анимации движения Lott ie - PullRequest
Новая
       84

Как исправить ошибку анимации движения Lott ie

0 голосов
/ 01 февраля 2020

Почему движение движущихся элементов дает сбой / перезапуск, если курсор находится над ними? Есть ли способ остановить это?

Спасибо 

var anim;
    var anim1 = document.getElementById('lottie1')
    var animation = {
        container: anim1,
        renderer: 'svg',
        loop: false,
        autoplay: false,   /*MAKE SURE THIS IS FALSE*/
        rendererSettings: {
        progressiveLoad: true},
        path: 'https://assets7.lottiefiles.com/packages/lf20_Er3Uiw.json',
        name: 'myAnimation',
    };
    anim = lottie.loadAnimation(animation);

anim.playSegments([1,70],true);

anim.addEventListener('complete', function(e) { 
    console.log('DOM loaded'); 
});

anim.addEventListener('complete', function(e) {

  var elem = document.getElementById('lottie1');

  elem.addEventListener('mouseover', mouseElem)
  elem.addEventListener('mouseleave', mouseElem2)

  function mouseElem() {
    anim.playSegments([90,112],true);
  }
    
  function mouseElem2() {
    anim.goToAndStop(70, true);
  }

});
 <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.js"></script>
 <div class="waypoint" id="lottie1" class="lottie1"></div>

Почему движение элементов колеблется, если на них наведен курсор? Есть ли способ остановить это?

Спасибо

...