Jump to content
Search Community

ScrollTrigger Pin not working after screen resize

nicolaseielll test
Moderator Tag

Recommended Posts

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.

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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. 

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.
×
×
  • Create New...