jeffballinger

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.