Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Nielsd

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

Recommended Posts

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

Link to post
Share on other sites

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

  • Like 1
Link to post
Share on other sites

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

  • Thanks 1
Link to post
Share on other sites
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.

Link to post
Share on other sites

This is officially in 3.4.0 which is out now. 👍

  • Like 1
Link to post
Share on other sites

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

  • Like 1
Link to post
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.

×