ScrollTrigger resize issue: pin-spacer gets visible and overlays the whole page

[Nielsd]

Hey,

step by step, I figure out, how this fantastic plugin works, but there is one thing, I'm not understanding:

 

The goal is, to make two different instances, which means, when the viewport is wider than 992px, it should load the instance for big screens. When it comes to smaller viewports (on resize), it should kill the actual instance and init a new one for smaller Screens. And that works perfectly with kill(), clearProps and then new init. But it works only on resize, when my scroll position is within the start and endpoint of the first screen instance (isActive). 

 

For example, I am on a big screen, scroll down for a while, after showing up my animation, I decide to change the screen size under 992px width. In that case, I get a blank viewport (the white pin-spacer gets visible).

 

Any idea, how to solve this issue?

 

You can see this behavior in the codepen demo. Just resize the demo at the start position and after, at the end of the page. You can see a different behavior.

Thank you very much for your support!!!

See the Pen ZEQyQpy by dunkelweb (@dunkelweb) on CodePen

[ZachSaucier]

Hey niels and welcome to the GreenSock forums! Thanks for supporting GreenSock by being a Club GreenSock member. And thanks a lot for making a clear demo!

 

We're actually experimenting with a new method for ScrollTrigger that makes this sort of thing a lot  easier. Check it out and let us know what you think:

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

[Nielsd]

Hello Zach, 

 

thank you very much for your quick response.

 

This feature looks perfect for me and I think, this is necessary for a perfect responsive behavior.

There is one thing in your example, which I would wish: If you scroll down to the end of the page, and make the size change, I thing, it would be perfect, to stay at this position. In your case, it jumps back to the start position of the page.

 

I'm looking forward, to work with your solution. This looks very easy to handle ScrollTrigger with different instances in different screens sizes.

Thank you very much! Niels

[ZachSaucier]

1 hour ago, Nielsd said:

There is one thing in your example, which I would wish: If you scroll down to the end of the page, and make the size change, I thing, it would be perfect, to stay at this position. In your case, it jumps back to the start position of the page.

Good catch. This only happened after the matchMedia breakpoint had been crossed once. It should be fixed now.

 

Let us know if you come across any other bugs.

[GreenSock]

This is officially in 3.4.0 which is out now. 👍

[Nielsd]

Jack, Zach and the rest of the team! Thank you very much! It works perfectly 😀