Play only a particular portion of a Lottie video

Html

<container class="first-lottie-banner" id="first-lottie-banner">
        </container>

Js

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.4/lottie_svg.min.js"></script>
<script>
var container = document.getElementById('first-lottie-banner');
var animation = bodymovin.loadAnimation({
  container: container,
  path: 'lottie-file-json-link',
  renderer: 'svg',
  loop: false,
  autoplay: false,
  name: "Demo Animation",
});
// To play a particular section on the lottie video
animation.addEventListener('DOMLoaded', () => {
  if(loop == 0) {
    animation.setSpeed(1);
    animation.playSegments([0, 500], true);
    loop = 2;
    scrollOnce = 0;
  }
});
</script>

Thank you.

Leave a comment

Your email address will not be published. Required fields are marked *