Scrolltrigger pin spacing issue on resize

[nesterson]

Hello!

Gsap is my go to for animation and i'm sure it will stay that way for years to come.

I'm getting a little deeper into its features and am a little stuck on what I'm doing wrong here. I have multiple timelines in a sequence which are using the pinning feature. Everything works as expected until resize - It seems like the padding on each pinned section just disappears on resize and the timelines start to overlap in a strange way. I'm unsure of how to fix that.

Hopefully I'm approaching this the right way but would really appreciate any pointers on how to achieve the result I'm after. I created a fairly simple version of what I'm trying to accomplish in codepen that illustrates the issue I'm having with resizing.

Thanks!

 

See the Pen LYORbqq?editors=1010 by joeycrowle (@joeycrowle) on CodePen

[akapowl]

Hello Joey,

 

If you log out all the ScrollTrigger instances in your resize function, you will notice that since you are calling your createTimelines function on every resize, you are also creating new ScrollTriggers everytime on top of the old, which is not good.

 

When you pass a value to a ScrollTriggered tween that needs to be re-evaluated on every resize, you'll want to set invalidateOnRefresh: true on the respective ScrollTrigger and use a function based value for that tween (like with that coverScale function you're using to get the correct scale).

 

invalidateOnRefresh

Boolean - If true, the animation associated with the ScrollTrigger will have its invalidate() method called whenever a refresh() occurs (typically on resize). This flushes out any internally-recorded starting values.

 

 

 

 

If you also need to setup things specifically for the resizes before the STs are created (like I assume you would with your setCoverPosition function), you can add an eventListener to ScrollTrigger to handle that, e.g. on 'revert'.

• "revert" - when ScrollTrigger reverts the page to its original state, after it has removed all of its pinning spacers, etc. This typically happens between a "refreshInit" event and a "refresh" event.

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.addEventListener()

 

 

 

I'm not saying that this example below is the ideal solution to your problems but it does appear to work way better already, considering all of the above. I hope it will help a bit to get on the right track. Happy scrolling!

 

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

 

[nesterson]

Hey akapowl,

This is really helpful! Thanks so much for the quick response - it should definitely get me on the right track.