Lottie Test 1

index.html

<div class="container">
  <div id="lottie"></div>
  
  <div id="controls">
    <h3>Animation control</h3>
    <button onclick="animation.stop();">stop</button>
    <button onclick="animation.play();">play</button>
    <button onclick="animation.pause();">pause</button>
    <button onclick="animation.setDirection(1);">forward</button>
    <button onclick="animation.setDirection(-1);">reverse</button>
    <button onclick="animation.playSegments([60,90], true);">segment</button>
    <h3>Speed</h3>
    <button onclick="animation.setSpeed(0.5);">1/2</button>
    <button onclick="animation.setSpeed(1);">1</button>
    <button onclick="animation.setSpeed(2);">2</button>
    <h3>Container control</h3>
    <button onclick="javascript: $('#lottie').toggleClass('zoom');">zoom</button>
    <button onclick="javascript: $('#lottie').toggleClass('animation');">anim</button>
    <button onclick="javascript: $('#lottie').toggleClass('fade');">fade</button>
    <p>Cycles: <span id="aCycles">0</span><br>
      Current Frame: <span id="aFrames">0</span><br>
      Total Frames: <span class="tFrames">0</span>
      <br>
    0 <input type="range" min="0" max="1" id="fRange"> <span class="tFrames">0</span>
    </p>
  </div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.13.0/bodymovin.js"></script>

lottie-test-1.markdown

Lottie Test 1

A Pen by moelle89 on CodePen.

License.

script.js

//counters
var animCycles = 0;
var animFrame = 0;

var targetAnim = document.getElementById('lottie');
var animRange = document.getElementById('fRange');

var animation = bodymovin.loadAnimation({
  container: targetAnim, // Required
  path: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/914929/estimate.json', // Required
  renderer: 'svg', // Required
  loop: true, // Optional
  autoplay: true // Optional
})

animRange.addEventListener('change', function(){
  var gotoFrame = $('#fRange').val();
  animation.goToAndPlay(gotoFrame, true)
  console.log(gotoFrame);
})


targetAnim.addEventListener('click', function(){
 animation.play();
})

animation.addEventListener('data_ready', function(){
  $('.tFrames').html(animation.totalFrames);
  $('#fRange').attr('max',animation.totalFrames);
})

animation.addEventListener('loopComplete', function(){
  animCycles++;
  $('#aCycles').html(animCycles);
})

animation.addEventListener('enterFrame', function(){
  animFrame = parseInt(animation.currentRawFrame);
  $('#aFrames').html(animFrame);
  $('#fRange').val(animFrame);
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.scss

body {
  background: #222;
  color: #fff;
  font-family: Arial;
}

h3 {
  font-weight: normal;
}

button {
  background: #000;
  color: #999;
  border: 1px solid #999;
  padding: 8px;
  width: 70px;
  transition: all 0.3s;
  margin-right: 15px;
  
  &:hover {
    color: #0f0;
    border: 1px solid #0f0;
    cursor: pointer;
  }
}

#fRange {
  margin: 30px 0 0;
  width: 300px;
}

.container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#controls {
  position: absolute;
  top: 20px;
  left: 20px;
}

#lottie {
  height: 400px;
  width: 400px;
  overflow: hidden;
  transition: all 0.8s;
}

.zoom {
  transform: scale(1.3); 
}

.fade {
  opacity: 0;
}

.animation {
  animation: rotate3d 3s linear infinite;;
}

@keyframes rotate3d {
  0% {transform: rotateY(0)}
  100% {transform: rotateY(360deg)}
}