ScrollMagic + Json + lottie Animation in wordpress using elemonter plugin

 <style>

body {

  margin: 0;

  padding: 0;

  font-family: sans-serif;

}

h1 {

  margin-top: 0;

}

.white {

  color: black;

}

 

.header {

  width: 80%;

  background: transparent;

  padding: 1rem;

  position: absolute;

  top: 10rem;

  left: 1rem;

  z-index: 1000;

}

.lottie-env {

  width: 100%;

  height: auto;

}

.lottie-env .button-container {

}

a {

  color: black;

}

.cta-text {

  text-align: center;

}

#lottie-two svg g g g path {

  cursor: pointer;

}

#lottie-four svg g g g path {

  cursor: pointer;

}

#lottie-five svg g g g path {

  cursor: pointer;

}

#lottie-six svg g g g path {

  cursor: pointer;

}

#lottie-seven svg g g g path {

  cursor: pointer;

}

.env-three {

  width: 100%;

}

#lottie-three {

  height: 100vh;

  width: 100%;

}

.env-two {

  height: 40rem;

  width: 40rem;

}

.display-buttons {

  display: flex;

  justify-content: center;

  align-items: center;

  width:100%;

}

</style>

  <script>

  window.console = window.console || function(t) {};

</script>

  

  

  <script>

  if (document.location.search.match(/type=embed/gi)) {

    window.parent.postMessage("resize", "*");

  }

  

  

  var isMobile = {

    Android: function() {

        return navigator.userAgent.match(/Android/i);

    },

    BlackBerry: function() {

        return navigator.userAgent.match(/BlackBerry/i);

    },

    iOS: function() {

        return navigator.userAgent.match(/iPhone|iPad|iPod/i);

    },

    Opera: function() {

        return navigator.userAgent.match(/Opera Mini/i);

    },

    Windows: function() {

        return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/WPDesktop/i);

    },

    any: function() {

        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());

    }

};

 if( isMobile.any() ) 

{

var src = 'https://assets.lottiefiles.com/datafiles/3gpFPHJI4WlLe62/data.json';

    

}

else

{

 var src = 'https://assets.lottiefiles.com/datafiles/3gpFPHJI4WlLe62/data.json'

    

}

</script>

</head>

  <div class="header"> 

</div>

<section class="lottie-env env-three">

  <div id="lottie-three">

      

  <div>

</section>

  <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js"></script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.2/lottie.min.js'></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js'></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js'></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js'></script>

      <script id="rendered-js" >

//////////////////////////

//FIRST animation : https://assets.lottiefiles.com/datafiles/3gpFPHJI4WlLe62/data.json

var animData = {

  container: document.getElementById('lottie-three'),

 // path: 'https://assets.lottiefiles.com/datafiles/7HMs29Q0NhBUKCp/data.json',

  path:src,

  renderer: 'svg',

  loop: false,

  autoplay: false,

  name: "animScroll" },

animScroll,tl;

var animScroll = bodymovin.loadAnimation(animData);

animScroll.addEventListener('DOMLoaded', function () {

  tl = new TimelineMax({ repeat: 0 });

  tl.to({ frame: 0 }, 1, {

    frame: animScroll.totalFrames - 1,

    onUpdate: function () {

      animScroll.goToAndStop(Math.round(this.target.frame), true);

    },

    Ease: Linear.easeNone });

  var controller = new ScrollMagic.Controller();

  var scene = new ScrollMagic.Scene({

    triggerElement: ".env-three",

    offset: 300,

    duration: 3000 }).setTween(tl).setPin("#lottie-three").addTo(controller);

});

// animation used: https://www.lottiefiles.com/29-motorcycle

//////////////////////////

//# sourceURL=pen.js

    </script>