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.
