ScrollTrigger start point wrong calculation if parent pinned

[Reinis]

Greetings!

I have run into this problem which seems quite trivial but I cannot find a solution. Please take a look at the demo. As you see I have a whole page wrapper pinned for two animations, the first one happens as expected but the second one I want to be started at a position of "center center" happens to start 500px earlier which is the duration of the previous animation. Is there any chance to take that duration into account when calculating the starting point of the second animation?

Thanks in advance!

See the Pen yLwKoEV by Reinis-Meulis (@Reinis-Meulis) on CodePen

[mvaneijgen]

Yes, you can add the total distance of the previous ScrollTrigger to the start of the next ScrollTrigger. Hope it helps and happy tweening! 

 

See the Pen rNRdGYr?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

And here a more elaborate setup 

 

See the Pen qBLRzVX?editors=0010 by GreenSock (@GreenSock) on CodePen

[Reinis]

Thanks @mvaneijgen!

It works as expected now.

I will have to adapt it quite a bit as in my project I have multiple types of sections and animations for them and they can be used or not used in any order on each page but that's doable. 

[akapowl]

While you certainly can add those calculations to the start for each of your ScrollTriggers within that pinned element as shown above by Mitchel, actually you do not have to do that. ScrollTrigger does have a built in property to do exactly that for you in cases as such: pinnedContainer
 

Quote

pinnedContainer

Element | String - If your ScrollTrigger's trigger/endTrigger element is INSIDE an element that gets pinned by another ScrollTrigger (pretty uncommon), that would cause the start/end positions to be thrown off by however long that pin lasts, so you can set the pinnedContainer to that parent/container element to have ScrollTrigger calculate those offsets accordingly. Again, this is very rarely needed. Important: nested pinning is not supported, so this feature is only for non-pinning ScrollTriggers
 

(added in 3.7.0)

https://gsap.com/docs/v3/Plugins/ScrollTrigger/

So the demos below with that property on the ScrollTriggers set to the pinned wrapping element should technically behave exactly the same as those with the calculations for the start shown above.

As I see he's been sharing that one demo a couple of times before, I'll also ping @Rodrigo just to make him aware. Of course there's absolutely nothing wrong with calculating things like that, it's just a different way to achieve the same result - but why do it when you can also let ScrollTrigger handle itself [Edit: except for maybe edge cases where you'd have to add some calculations anyway]. 🙃

See the Pen mdoxqNL by akapowl (@akapowl) on CodePen

See the Pen MWxVrgw by akapowl (@akapowl) on CodePen

 

[Reinis]

I was trying to use that pinnedContainer before starting this topic and it had no visible effect on this in my actual project. Dunno why. 

[Reinis]

Ok, I rewrote the logic of assigning timelines to elements and now the pinnedContainer param works fine too. Thanks @akapowl!