Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


Recommended Posts

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 defaults
st[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
  return animation;


"first image" (drips)                                                        "second image" (beginning of animation)



Link to comment
Share on other sites

Hi Jonathan,

Can you possibly put together a minimal demo on codepen so we can see the code in situ alongside the CSS and HTML?

It's near impossible to debug from just a JS snippet alone.


Thank you.

Link to comment
Share on other sites

No Cassie,

sorry I'm not able to create a demo Codepen.  I'm using a .json file as a Lottie animation and have scroll trigger on it.  The pen is quite a bit larger than 1MB.  There must be another way.

Link to comment
Share on other sites

You can put what you have a in CodePen. We don't want to see your entire site, just the problem you are having an issue with. It's nearly impossible to help someone fix a problem on a live site, especially if we can't interact with the code. You don't need to include any assets from your site. The simpler the demo, the better. 


  • Like 3
Link to comment
Share on other sites

  • 2 weeks later...

Thank you elegantseagulls for taking the time to actually read "and understand" how simple of a question this was.  Sadly that wasn't the fix I was looking for but I did indeed figure it out by applying a pin: false and a start: "top bottom-=300px" instead of what I initally had which was pin: true and a start: "top top".

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.