Question: How to add Play and Pause Buttons to multiple Lottie Web animations

[jaronjohnston]

I am building a webpage that has three Lottie animations on it and I want to add "Play" and "Pause" buttons to each animation - one set of buttons per animation. I stumbled upon this example on Codepen and used it successfully to create one single instance of a "play" and "pause" button on a Lottie animation: https://codepen.io/sangziii/pen/OogKYZ?editors=1010

When I tried to duplicate this code a second time and add a second set of buttons I could not figure out how to separate the two scripts successfully. I am somewhat new to coding Javascript and I am really stuck where i'm at with one Play and Pause button and code that I cannot seem to alter correctly in order to separate the two scripts from one another one the same page.

I duplicated this Javascript and added the correct file path for my second (different) animation and also changed the "lottie" variable to correspond to the second animation's ID on the webpage.

//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);
})

When I duplicated this script I could not figure out how to separate it from the first script so that I can run the same script twice on the same page and have two different Lottie animations each with their own Play and Pause buttons.

Any help would be appreciated!

[mitch15]

You'll also need to make sure the buttons are calling the correct animation to play or pause - while you've changed the "lottie" variable for your second animation (which is correct), you'll also need to make sure your buttons are calling the correct animation too. I've forked your Codepen below, with some of the other features stripped out so it's hopefully a bit easier to understand - note the onclick code for the buttons in the HTML pane.

https://codepen.io/mlife15/pen/yLxJNam

Hope that helps!