ScrollTrigger: Remove the white space created by pin-spacer

[imjs]

I have a scroll animation, where the 3 cat images will scroll into alignment on the background image. I only want the animation to run once. So I added `once: true` to scrollTrigger.

But I also want to remove the white space (created by pin-spacer) when the user scroll back up. It will just be the background image with 3 cats, no additional white space above.
 

Any suggestions?

 

Another question, if you start scrolling quickly before the background image is fully loaded, you will see that the image will overlap with the section after. How to avoid this issue?
 

See the Pen dyXqVdw by imjs (@imjs) on CodePen

[ZachSaucier]

Hey imjs. You can remove the spacing by using .kill(true) on the ScrollTrigger. But then you have a jump because the spacing is gone. Perhaps you could set the scroll position in the onComplete as well?

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

 

If you share your end goal there might be a better way to setup this sort of thing.

[imjs]

Hi Zach, Thanks for replying. 

Firstly, I forgot to add `scrub: true` to my initial demo. It is now added.
Secondly, the end goal is how it is after your edits, without the jumping. Is there any other way to set it up?

 

[ZachSaucier]

22 minutes ago, imjs said:

the end goal is how it is after your edits, without the jumping. Is there any other way to set it up?

The issue is logical: where should the user end up after the spacing is removed? If they are still in the pin then it's relatively easy. But if it's some place after then you'll need to calculate how far later and adjust the position to compensate. Make sense? 

 

Another way to set it up would be to restrict people from scrolling away from that section. Then you know that you can remove the extra spacing safely. 

[imjs]

5 minutes ago, ZachSaucier said:

If they are still in the pin then it's relatively easy.

In the pin is good enough. Could you please share how? 

Zach, I have another question - since I am pinning the div, gsap is doing all the calculation on the height, and padding value of the pin-spacer, after the component is mounted, correct?
In my app, this animation is located in a lower section of a page (rather big page). If the user has a slower internet, and the user started scrolling before all the components of the page is fully rendered. What happens then is that the calculation is off, the section is overlapping with the section before/after it. I currently wrapped the animation in a setTimeout but it is not ideal. Any advice for this issue?

[ZachSaucier]

24 minutes ago, imjs said:

In the pin is good enough. Could you please share how? 

Calculate the scroll position to keep the element pinned in the center:

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

 

25 minutes ago, imjs said:

gsap is doing all the calculation on the height, and padding value of the pin-spacer, after the component is mounted, correct?

It does it when you create the ScrollTrigger or the refresh event happens.

 

26 minutes ago, imjs said:

What happens then is that the calculation is off, the section is overlapping with the section before/after it.

That could be due to several issues depending one exactly what you mean. Maybe you need to call ScrollTrigger.refresh() after the component loads?