scrollTrigger - Timeline start position where a previous pin with pinSpacer ends.

[beavykins]

Is it possible to pass in the end position of a previously pinned scrollTrigger element as the start position of another?

 

Basically I have two timelines, the first one has a pin with a pinSpacer and I want to then have another timeline start when the previous one unpins, is that possible? At the moment I have it working by manually calculating the start position in the next timeline but it seems like there is probably a ‘simpler’ way.

 

Thanks!

[GreenSock]

Sure! There are a few ways...

let tl = gsap.timeline({
  scrollTrigger: {
    ... 
  }
});
  
let otherTL = gsap.timeline({
  scrollTrigger: {
    start: () => tl.scrollTrigger.end, // function-based value
    ...
  }
});

That assumes you create them in the proper order so the first one gets refreshed before the second one (its start/end values are calculated by the time the following one has to read them). 

 

If you know for sure it's the previous one, you could also do this: 

let otherTL = gsap.timeline({
  scrollTrigger: {
    start: self => self.previous().end
  }
});

I'm just assuming you're using timelines but this same thing works regardless - use it in ScrollTrigger.create() or in a tween or whatever. 

 

Is that what you were looking for? 

[beavykins]

This looks just like what I need thanks! I’m on my phone at the moment so will give this a whirl when I get on the machine and will report back.

 

loving your work, thanks again!

[beavykins]

It worked exactly how I wanted, thanks so much!