Лотти-код работает в Codepen, но не при встраивании - PullRequest
Новая
       33

Лотти-код работает в Codepen, но не при встраивании

0 голосов
/ 17 июня 2019

Итак, у меня есть эта ручка: https://codepen.io/MattDAndre/pen/QXNvLr

Это красиво, это работает, я так счастлив!

При встраивании кода в мою страницу Webflow (с некоторыми изменениями CSS) мне нравится объединять CSS и JS в мой HTML.

Вот как это выглядит: 

<html>
<head>
  <style>

  #lottie {
    width: 25vw;
    height: auto;
  }

  </style>
</head>
<body>

  <div id="lottie"></div>

  <script src="https://audioplayerskin.s3.amazonaws.com/Json+Files/lottie.js" type="text/javascript"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js" type="text/javascript"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js" type="text/javascript"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js" type="text/javascript"></script>
  <script src="https://cdn.anothercreative.ca/js/lottie.min.js" type="text/javascript"></script>
  <script>

  // init scrollmagic
  var controller = new ScrollMagic.Controller();

  // init lottie, load svg json, and declare params
  var lottieAnimation = lottie.loadAnimation({
      container: document.getElementById('lottie'),
      renderer: 'svg',
      loop: false,
      autoplay: false,
      path: 'https://assets7.lottiefiles.com/packages/lf20_oNDAX8.json'
  });

  // init gasp timeline to wrap the lottie animation

  var lottieControl = new TimelineMax();
    lottieControl.to({/*frame:0*/}, 1, {

        onUpdate:function(){

        lottieAnimation.play()
      },
    })

  // init basic scrollmagic scene for debug purpouses
  var lottieScene = new ScrollMagic.Scene({triggerElement: "#lottie", triggerHook: .25})
    .addIndicators({name:"lottie trigger indicator"})
    .setTween(lottieControl)
    .addTo(controller);

  </script>
</body>
</html>

К сожалению, это не обнаруживается! Вот мой черновик Webflow: https://murrvox.webflow.io/

Вы найдете, где моя анимация должна быть ближе к нижней части страницы в разделе "наш процесс". Вы также увидите работающую анимацию -> Я использовал для этого веб-проигрыватель embed lottie, к сожалению, у него есть некоторые проблемы, отсюда и обходной путь!

"Индикаторы" прокрутки магии выглядят просто отлично, но моей лотерейной анимации нигде не видно.

Что не так с моим консолидированным кодом для встраивания? Я неправильно ссылаюсь на js-скрипты в теле моего кода?

Буду рад любым мыслям / наблюдениям / помощи, которые вы можете предложить!

Спасибо:)

...