[Multiple scroll triggers for lottie animations in different sections]

I am trying to setup multiple gsap scroll triggers with lottie animations in 3 sections. I would like the screen to pin to the animations until they complete. This is the code I currently have, which seems to mostly work. I randomly will see issues where section scroll weird or animations don't finish completely. Any help would be greatly appreciated.

 

<section class="section--01 section--side-by-side">
  <div class="grid-container">
    <div class="grid-x grid-padding-x align-center">
        <div class="cell medium-6">
        <h2>Title</h2>
        <p>Description</p>
      </div>
      <div class="cell medium-6 side-by-side-wrapper">
        <div id="section-lottie--01">
          <div class="lottie-container"></div>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="section--02">
  <div class="grid-container">
    <div class="grid-x grid-padding-x align-center">
        <div class="cell small-12 medium-6">
        <h2 class="text-center">Title</h2>
        <div id="section-lottie--02">
          <div class="lottie-container"></div>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="section--03 section--side-by-side">
  <div class="grid-container">
    <div class="grid-x grid-padding-x align-center">
        <div class="cell medium-6">
        <h2>Title</h2>
        <p>Text</p>
      </div>
      <div class="cell medium-6">
        <h3>Subtitle</h3>
        <div id="section-lottie--03">
          <div class="lottie-container"></div>
        </div>
      </div>
    </div>
  </div>
</section>


<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js" integrity="sha512-f8mwTB+Bs8a5c46DEm7HQLcJuHMBaH/UFlcgyetMqqkvTcYg4g5VXsYR71b3qC82lZytjNYvBj2pf0VekA9/FQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.8/lottie.min.js"></script>

<script>
$(document).ready(function () {
  let mobile = window.innerWidth < 749;

  gsap.registerPlugin(ScrollTrigger);

  LottieScrollTrigger({
    target: "#section-lottie--01 .lottie-container",
    trigger: ".section--01",
    path:'/jobseeker-bar-chart.json',
    speed: "medium",
    pin: ".section--01",
    scrub: 1,
    start: mobile ? "center 45%" : "center center"
  });

  LottieScrollTrigger({
    target: "#section-lottie--02 .lottie-container",
    trigger: ".section--02",
    path:'/salary-bar-chart.json',
    speed: "medium",
    pin: ".section--02",
    scrub: 1,
    start: "center 75%"
  });

  LottieScrollTrigger({
    target: "#section-lottie--03 .lottie-container",
    trigger: ".section--03",
    path:'/salary-scatter-chart.json',
    speed: "medium",
    pin: ".section--03",
    scrub: 1,
    start: mobile ? "center 45%" : "center 55%"
  });

  function LottieScrollTrigger(vars) {
    let playhead = {frame: 0},
      speeds = {slow: "+=2000", medium: "+=1000", fast: "+=500"},
      target = gsap.utils.toArray(vars.target)[0]
      st = {trigger: target, pin: true, start: "center center", end: speeds[vars.speed] || "+=1000", scrub: 1},
      animation = lottie.loadAnimation({
        container: target,
        renderer: vars.renderer || "svg",
        loop: false,
        autoplay: false,
        path: vars.path
      });

    for (let p in vars) { // let users override the ScrollTrigger defaults
      st[p] = vars[p];
    }

    animation.addEventListener("DOMLoaded", function () {
      gsap.to(playhead, {
        frame: animation.totalFrames - 1,
        ease: "none",
        onUpdate: () => animation.goToAndStop(playhead.frame, true),
        scrollTrigger: st
      });
    });
  }
});

</script>

It seems that I get different results when I refresh the page. Randomly the page will jump to the next section while scrolling through an animation.