multiple animations on page

[jeansevilla]

hi, i have multiples animations on the page but just one works, these are the 3 animations. thank you

      <div id="face"></div>
      <script src="js/lottie.js" ></script> 
      <script>

let anim= lottie.loadAnimation({ container: document.getElementById('face'), renderer: 'svg', loop: true, autoplay: false, path: 'JS/face.json', });

anim.addEventListener('DOMLoaded', (e) => { anim.playSegments([[0,125],[50,125]], true); });

 <div id="office"></div>
    <script src="js/lottie.js" ></script> 
    <script>

let anim= lottie.loadAnimation({ container: document.getElementById('office'), renderer: 'svg', loop: true, autoplay: false, path: 'JS/office.json', });

anim.addEventListener('DOMLoaded', (e) => { anim.playSegments([[0,225],[50,225]], true); });

    <script src="js/lottie.js" ></script> 
    <script>
let anim= lottie.loadAnimation({

container: document.getElementById('maps'), renderer: 'svg', loop: true, autoplay: false, path: 'JS/maps.json', });

anim.addEventListener('DOMLoaded', (e) => { anim.playSegments([[0,250],[50,250]], true); });

[bodymovin]

Hi, the formatting of the code didn't come through clear, but this seems to be a Javascript issue. If you declare the same variable multiple times in the same scope, your variable will change the reference to the last instance you defined. You probably want to individually scope each one of the instances.

[jeansevilla]

Hi, the formatting of the code didn't come through clear, but this seems to be a Javascript issue. If you declare the same variable multiple times in the same scope, your variable will change the reference to the last instance you defined. You probably want to individually scope each one of the instances.

thank you so much for your prompt reply, you could give me an example, I'm not a programmer so I have a lot of trouble figuring out where I'm wrong. thank you very much!!!