Hello everyone. I'm very new to GSAP and I've been trying to figure out how to make this Scroll Trigger began animating following the
"first image" (drips) I have attached here. The second image is of a skateboard deck at the beginning of it's entry animating with Scroll Trigger. The problem is, the decks don't start animating until the "first image" (drips) has completely exited the top of the viewport creating a large non fluent gap of blank space. I feel like I've tried so many different things which were nothing short of guessing. I've tried to figure this correction out over the entire past month before reaching out to you guys here. All I'm trying to achieve is the Scroll Animation begins animating and following the "first image" (drips) from the bottom of the view port and becoming pinned once it reaches the full height of the viewport where it will finish the animation before exiting the viewport. Which I have the pinning and exiting like I want it. I just can't seen to be able to get it to follow the "first image" (drips) from the bottom.
The animation is at 22BOARDCO.COM. It's on the Homepage about midway down. Begins with one spinning skateboard deck followed by two more coming in from the left side of the viewport . Here is the code I have so far. Can anyone please help me with this little adjustment? Thank you guys so much for your time.
function LottieScrollTrigger(vars) {let playhead = {frame: 0},target = gsap.utils.toArray(vars.target)[0],speeds = {slow: "+=2000", medium: "+=1000", fast: "+=500"},st = {trigger: target, pin: true, start: "top top", end: speeds[vars.speed] || "+=2000", scrub: 0.3},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 defaultsst[p] = vars[p];}animation.addEventListener("DOMLoaded", function() {gsap.to(playhead, {frame: animation.totalFrames - 1,ease: "true",onUpdate: () => animation.goToAndStop(playhead.frame, true),scrollTrigger: st}); // in case there are any other ScrollTriggers on the page and the loading of this Lottie asset caused layout changes ScrollTrigger.sort(); ScrollTrigger.refresh();}); return animation;}
"first image" (drips) "second image" (beginning of animation)