ScrollTrigger Pin not working after screen resize

[nicolaseielll]

I have a problem with calculating the correct end value to scrollTrigger after a screen resize. On the initial page load the trigger end value is correct but after trying to create the scrollTrigger again with the new values, the pin breaks.
 

I have tried kill() and create() the scrollTrigger again and making sure that the values are calculated before initializing the scrollTrigger again but nothing seems to work. I logged the end value of the scrollTrigger after calculating and the value does update, but why is the value wrong if it is correct on the initial load? This led to wrapping the ScrollTrigger.create() inside a setTimeout but it had no effect either.

 

Here's a simple demo of the issue: https://codesandbox.io/s/kind-waterfall-wkd5bj?file=/pages/index.vue

 

In the actual project I'm using VW as a base font-size so thats why the box is set to the unit as well so it demonstrates the original project better.

[Cassie]

Heya!

 

Thanks for the demo and being part of Club GreenSock! There's a simpler route here, ScrollTrigger calls 'refresh' on resize to recalculate values automatically. So you can use functional values and invalidateOnRefresh to clear out any stale values - you don't need to recreate a new scrollTrigger each time.

Something like this maybe?

See the Pen qBJWQLG?editors=1011 by GreenSock (@GreenSock) on CodePen

[nicolaseielll]

Thank you for this! It helped me figure out the real problem since I built the whole component again on this template you provided. The component works perfectly on a separate empty page but when I transfer the code to the actual page where the component should be, the resizing is still slightly off. So I guess because there's so much stuff to resize it takes a while for the browser to put everything in place so the invalidateOnRefresh gets the wrong values of the page which is still "resizing". So my question: is it possible to delay the invalidateOnRefresh or delay the calculation in some other way?

[Rodrigo]

Hi,

 

Do you have a minimal demo that shows this behaviour? Are you lazy loading something or got anything in your code that could be causing some layout shifting? Are you creating your ScrollTrigger instances in the order they appear in the screen?

 

Also, you have this in your original post example:

mounted() {
  this.setPin();
  var timeout;
  // Recreate scrolltrigger with new dimensions
  window.addEventListener("resize", () => {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      this.setAnim();
    }, 250);
  });
},

But I don't see the setAnim method defined anywhere 🤷‍♂️

 

If you provide a minimal demo we'll be able to clearly see what the problem is here.

 

Happy Tweening!

[GreenSock]

On 4/6/2023 at 2:32 AM, nicolaseielll said:

So my question: is it possible to delay the invalidateOnRefresh or delay the calculation in some other way?

No, I don't think that'd be appropriate because it's incredibly important that things go in the proper order, top to bottom when refreshing because things further up on the page can affect things further down. And I can't imagine a scenario where it would be helpful to delay an invalidation like this, but if you really need to I guess you could do it manually by listening for the "refresh" event (or add an onRefresh) and then using a setTimout() or gsap.delayedCall() to then manually invalidate() the tween/timeline. I really doubt that's necessary though.