Code works in Codepen, but not when embedded?

Design help Custom code
1

So, I’ve got this pen: https://codepen.io/MattDAndre/pen/QXNvLr

It’s beautiful, it works, I’m so happy!

When embedding the code into my Webflow page (with some CSS modifications), I like to consolidate the CSS and JS into my HTML.

Here’s what that looks like:

<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>

Unfortunately, it doesn’t show up! Here’s my Webflow Draft: https://murrvox.webflow.io/

You’ll find where my animation should be closer to the bottom of the page under the “our process” section. You’ll also see a working animation → I used an embed lottie web player for that one, unfortunately it has some issues, hence this workaround!

Scroll Magic’s “Indicators” appear just fine, but my lottie animation is nowhere to be seen.

What’s wrong with my consolidated embed code? Am I linking to the js scripts wrong in my code’s body?

I’d love any thoughts/observations/help you might have to offer!

Thanks! :slight_smile:

2

So bad news is that I’m still unsure as to why the code isn’t transferring well. Good news is Lottie’s online web player updated 5 minutes after my posting this with a fix to the problem that led me to messing with this in the first place!

Problem solved-ish! :slight_smile: