Problems with page jumping when removing a pin

[darkus]

I have a fairly large pin area with alot of complex animations inside of it.  I want this pin to run only one time. 

 

Using once:true isnt good because it leave alot of whitespace

 

So I've read about killing the trigger onLeave

 

I know there have been several posts about this, and I read through all of them and tried to implement all the permutations but still cant get this to work properly.

 

My problem is that there is still a bit of a kick as the page jumps as the whitespace is being removed and the scroll location is jumping to where it was 'supposed' to be

 

1. You notice the effect, if you scroll through the pin at a decent speed, sometimes its percieved as a pause, othertimes its seen as a glitchy short jump if you have this pen on full screen (short jump meaning its jumping to the wrong place)

2. On my development page the incorrect jump distance is much larger. I cant replicate this on codepen, likely because my real page is much much larger and more complex

 

See the Pen MWzbPor by darkuss (@darkuss) on CodePen

[Rodrigo]

Hi,

 

I think this could be related to the way ScrollSmoother works actually. The solution you're trying does actually work in a scenario with just ScrollTrigger as you probably saw in the other threads where this was implemented, like here:

The best solution I can come up with is to pause the ScrollSmoother instance for a bit and then use a timeout to un-pause it and instead of using the ScrollTrigger instance that is pinning the section, better use the ScrollTrigger instance associated with ScrollSmoother. Here is a fork of your codepen:

See the Pen vYQyvVQ by GreenSock (@GreenSock) on CodePen

 

Still the setTimeout option doesn't make me very happy, so I'll check with the top floor offices and see if there is a better way.

 

Hopefully this helps.

Happy Tweening!

[darkus]

3 hours ago, Rodrigo said:

Hi,

 

I think this could be related to the way ScrollSmoother works actually. The solution you're trying does actually work in a scenario with just ScrollTrigger as you probably saw in the other threads where this was implemented, like here:

The best solution I can come up with is to pause the ScrollSmoother instance for a bit and then use a timeout to un-pause it and instead of using the ScrollTrigger instance that is pinning the section, better use the ScrollTrigger instance associated with ScrollSmoother. Here is a fork of your codepen:

 

 

 

Still the setTimeout option doesn't make me very happy, so I'll check with the top floor offices and see if there is a better way.

 

Hopefully this helps.

Happy Tweening!

Well its certainly good to hear i'm not totally crazy and this could be inherent to the way scrollsmoother is designed.  If a solution does come from up above, that would be outstanding.  Thanks for championing this!

[Rodrigo]

Hi,

 

I'm not saying that is inherent to ScrollSmoother. The solution being applied here is based on ScrollTrigger and maybe there's a better one that's eluding me, that's all.

 

Finally out of curiosity, the demo in my previous post is working in the way you intend or not?

 

Happy Tweening!

[darkus]

10 hours ago, Rodrigo said:

Hi,

 

I'm not saying that is inherent to ScrollSmoother. The solution being applied here is based on ScrollTrigger and maybe there's a better one that's eluding me, that's all.

 

Finally out of curiosity, the demo in my previous post is working in the way you intend or not?

 

Happy Tweening!

No unfortunatly it doesnt work

[GreenSock]

Yeah, this is a tricky scenario because you're removing a pin while the smoother is trying to "catch up" to the normal scroll position and you're changing the entire height of the page which would impact how ScrollSmoother is doing its smoothing distance-wise. 

 

How about this?:

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

 

Is that working the way you hoped? It's using the smoother's positioning rather than the native page's, and it's forcing a refresh() of the smoother's ScrollTrigger so that it gets based on the NEW page height. 

[darkus]

2 hours ago, GreenSock said:

Yeah, this is a tricky scenario because you're removing a pin while the smoother is trying to "catch up" to the normal scroll position and you're changing the entire height of the page which would impact how ScrollSmoother is doing its smoothing distance-wise. 

 

How about this?:

 

 

 

Is that working the way you hoped? It's using the smoother's positioning rather than the native page's, and it's forcing a refresh() of the smoother's ScrollTrigger so that it gets based on the NEW page height. 

 

Oh wow, seems to work really well on the codepen. 

 

However, when I transpose it to my development site it doesnt work.  In my case, it jumps to the bottom of my page (creates some new blank whitespace, it semes like it wants to jump even below the bottom).  And as far as I can tell, it actually wipes out all my page content above where the pin was (ALOT of page content).  Its hard to explain, I've never seen anything like that.  I'm trying to replicate the effect on codepen but I cant.  

 

Heres to a longshot that my description rings any bells?

[GreenSock]

It's pretty tough to troubleshoot blind, but are you using the latest version of ScrollSmoother/ScrollTrigger? I can't imagine how killing a ScrollTrigger (that was pinned) could possibly "wipe out" a bunch of page content. All it does is remove the pinSpacer and swap the original element back into where it started. My best guess is that you've got some sort of CSS/layout issue with how you built things that causes things to collapse if the pinSpacer element isn't there. Or maybe you're actually inserting a bunch of stuff INSIDE the pinSpacer which you definitely shouldn't do. If you can provide a minimal demo illustrating the problem, I'm sure we'd be able to identify the problem. 

[GreenSock]

One more guess: you left once: true in your config maybe? That'd be redundant since we're doing the same kind of thing (but better) in our onLeave callback. That wouldn't cause any of your other content to get deleted or anything. I'm just taking stabs in the dark here

[darkus]

3 hours ago, GreenSock said:

It's pretty tough to troubleshoot blind, but are you using the latest version of ScrollSmoother/ScrollTrigger? I can't imagine how killing a ScrollTrigger (that was pinned) could possibly "wipe out" a bunch of page content. All it does is remove the pinSpacer and swap the original element back into where it started. My best guess is that you've got some sort of CSS/layout issue with how you built things that causes things to collapse if the pinSpacer element isn't there. Or maybe you're actually inserting a bunch of stuff INSIDE the pinSpacer which you definitely shouldn't do. If you can provide a minimal demo illustrating the problem, I'm sure we'd be able to identify the problem. 

Agree with you, never seen anything able to just erase huge blocks of content like that before, especially from just killing a pin. 

 

Not sure what is going on since I cant reproduce it on the sample codepen.   

 

I'm going to keep playing with that pen to see if I can reproduce the problem (and will update you) or just delve deeper into how I coded my page.  Its become a gargantuan mess  but I can say that pin/pinspacer is super clean with only 2 elements animating inside the pin, but has nothing to do with the parts that are getting just deleted off the screen

[GreenSock]

Are you using a framework like React? If so, are you doing proper cleanup, like with gsap.context()?