Question

所以，我有这支笔：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/

在“我们的流程”部分下，您会发现我的动画应该靠近页面底部的位置。您还将看到一个有效的动画->我为此使用了嵌入式抽奖式网络播放器，不幸的是它存在一些问题，因此可以采用此解决方法！

Scroll Magic的“ Indicators”看起来很好，但是我的乐透动画无处可见。

合并的嵌入代码有什么问题？我在代码正文中链接到JS脚本是否错误？

我很乐意为您提供任何想法/意见/帮助！

谢谢：）

Lottie代码在Codepen中有效，但在嵌入时无效

0 个答案: