<div class="header">
  <h1 class="white">Animating with Lottie, ScrollMagic, and GSAP.</h1>
  <h3 class="white">A quick testing playground.</h3>
  <p class="white">This playground contains several methods to manipulate lottie animations.</p>
  <a target="_blank" href="https://www.lottiefiles.com/29-motorcycle">Bike Animation</a>
  <a target="_blank" href="https://www.lottiefiles.com/432-done-button">Check Animation</a>
  <a target="_blank" href="https://www.lottiefiles.com/82-rey-updated">Rey Animation</a>
</div>


<section class="lottie-env env-three">
  <div id="lottie-three"><div>
</section>



<section class="lottie-env">
  <div id="lottie"></div>
  <div class="button-container">
    <button id="dark-btn" class="dark-mode">Toggle Dark Mode</button>
    <button id="light-btn" class="dark-mode">Toggle Light Mode</button>
    <button id="pause-btn">Pause</button>
    <button id="play-btn">Play</button>
  </div>
</section>

<section class="lottie-env env-two">
  <div class="display-buttons">
    <div id="lottie-two"></div>
    <div id="lottie-four"></div>
    <div id="lottie-five"></div>
    <div id="lottie-six"></div>
     <div id="lottie-seven"></div>

  </div>
</section>

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

    
<section class="lottie-env env-last">
  <div id="lottie-coin"><div>
</section>    

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%;
}

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

//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',
  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


//first animation ///////////////////



var animation = bodymovin.loadAnimation({
  container: document.getElementById('lottie'),
  path: 'https://assets.lottiefiles.com/datafiles/jW5K6vtuzJFJSxd/data.json',
  renderer: 'svg',
  loop: true,
  autoplay: false,
  name: "Bike",
})


animation.addEventListener('DOMLoaded', function () {
  
  //play the light mode by default

  document.getElementById('dark-btn').addEventListener("click", function() {
    animation.playSegments([105, 150], true)
  })

   document.getElementById('light-btn').addEventListener("click", function() {
    animation.playSegments([0, 100], true)
  })

    document.getElementById('pause-btn').addEventListener("click", function() {
    animation.pause();
  })
  
      document.getElementById('play-btn').addEventListener("click", function() {
    animation.play();
  })


  
})


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

//second animation

// https://assets.lottiefiles.com/datafiles/xagAVK6Z2hhaURL/data.json

var animationTwo = bodymovin.loadAnimation({
  container: document.getElementById('lottie-two'),
  path: 'https://assets.lottiefiles.com/datafiles/xagAVK6Z2hhaURL/data.json',
  renderer: 'svg',
  loop: false,
  autoplay: false,
  name: "button",
})


animationTwo.addEventListener('DOMLoaded', function () {
  document.getElementById('lottie-two').addEventListener("click", function() {
    animationTwo.playSegments([0, 19], true);
    
  })
})






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

// fourth animation https://assets.lottiefiles.com/datafiles/c8496f99bf2fc2521b7970aae7de368f/favorite_black.json



var animationFour = bodymovin.loadAnimation({
  container: document.getElementById('lottie-four'),
  path: 'https://assets.lottiefiles.com/datafiles/c8496f99bf2fc2521b7970aae7de368f/favorite_black.json',
  renderer: 'svg',
  loop: false,
  autoplay: false,
  name: "buttonTwo",
})


animationFour.addEventListener('DOMLoaded', function () {
  document.getElementById('lottie-four').addEventListener("click", function() {
    animationFour.playSegments([60, 100], true);
    
  })
})


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


/////    animation five: https://assets.lottiefiles.com/datafiles/37eUecfCINgL4BgFY1NcvncT1LRajr8hJkkfQ9DY/star/star.json

var animationFive = bodymovin.loadAnimation({
  container: document.getElementById('lottie-five'),
  path: 'https://assets.lottiefiles.com/datafiles/37eUecfCINgL4BgFY1NcvncT1LRajr8hJkkfQ9DY/star/star.json',
  renderer: 'svg',
  loop: false,
  autoplay: false,
  name: "buttonThree",
})


animationFive.addEventListener('DOMLoaded', function () {
  document.getElementById('lottie-five').addEventListener("click", function() {
    animationFive.playSegments([10, 100], true);
    
  })
})


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

/// animation six: https://assets.lottiefiles.com/datafiles/Unitn8Nj7K22mia/data.json

var animationSix = bodymovin.loadAnimation({
  container: document.getElementById('lottie-six'),
  path: 'https://assets.lottiefiles.com/datafiles/Unitn8Nj7K22mia/data.json',
  renderer: 'svg',
  loop: false,
  autoplay: false,
  name: "buttonFour",
})


animationSix.addEventListener('DOMLoaded', function () {
  document.getElementById('lottie-six').addEventListener("click", function() {
    animationSix.playSegments([10, 100], true);
    
  })
})


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

// animation 7 https://assets.lottiefiles.com/datafiles/HVBenAp3V6Y3nLl/data.json

var animationSeven = bodymovin.loadAnimation({
  container: document.getElementById('lottie-seven'),
  path: 'https://assets.lottiefiles.com/datafiles/HVBenAp3V6Y3nLl/data.json',
  renderer: 'svg',
  loop: false,
  autoplay: false,
  name: "buttonFive",
})


animationSeven.addEventListener('DOMLoaded', function () {
  document.getElementById('lottie-seven').addEventListener("click", function() {
    animationSeven.playSegments([0, 50], true);
    
  })
})







var animDataTwo = {
  container: document.getElementById('lottie-coin'),
  path: 'https://assets.lottiefiles.com/datafiles/jORpumH9Yn0XoXQ/data.json',
  renderer: 'svg',
  loop: false,
  autoplay: false,
  name: "animScrollTwo",
}, animScrollTwo, tl;


var animScrollTwo = bodymovin.loadAnimation(animDataTwo)


animScrollTwo.addEventListener('DOMLoaded', function () {
  tl = new TimelineMax({repeat: 0})
  tl.to({frame: animScrollTwo.totalFrames-1}, 1, {
    frame: 0,
    onUpdate: function() {
      animScrollTwo.goToAndStop(Math.round(this.target.frame), true)
    },
    Ease:Linear.easeNone
  })
  
  var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({
  triggerElement: ".env-last",
  offset: 300,
  duration: 6000 }).setTween(tl).setPin("#lottie-coin").addTo(controller);

})