Pin-Spacer issue on scroll

[5iddharth]

Hi, everyone

I recently started learning gsap but here is the Animation I am stuck with, there is a large padding because of pin-Spacer I think when I scroll to the start of the animation it appears, How can I fix it, also I make the pin true but its not working for me.

https://codesandbox.io/s/compassionate-glade-2cr7w2?file=/src/App.js

It works fine in between the start and end point.

[mvaneijgen]

Hi @5iddharth welcome to the forum!

 

Are you sure you've saved your project? The sandbox opens with the App.js file, but there is no GSAP code in there and I've looked through your other files and there also is no GSAP code.

 

Most people that are having issues with the pinSpacer (which is 100% necessary for the effect to work) don't like the 'white' gaps it leaves until the next container. A solution for this would be to wrap everything you want to pin in an extra container and pin that. Instead of pin: true, you can feed it a element eg, pin: ".myElmWithEverythingInIt".

 

See if that is a solution for your problem or update the link so we can take a look at your code. Hope it helps and happy tweening! 

 

 

[5iddharth]

@mvaneijgen my apology!😅 I have updated the link and yes I had wrapped it in an extra container but it is not working.

Have a look as soon as the start meets with scrollbar start "boom", there you have an extra spacing above, as you scroll down and back in between start and end it works fine!

[alig01]

Hey, 

 

gsap has super helpful learning material, which you should definitely check out. I would recommend you to start with this one, your problem will already be solved there by itself. 

 

To cite from the article: "Proper animation cleanup is crucial to avoid unexpected behaviour with React 18's strict mode. This pattern follows React's best practices."

 

Basically you have to wrap your animation code in a gsap.context and everything should look like expected.

 

useLayoutEffect(() => {
  let ctx = gsap.context(()=>{
  //put here your Ani timeline
  //and your .to() animations	
  });
  return () => ctx.revert();
}, []);
  

 

You will find other usefull tips from the follow-up articles, such as using useLayoutEffect when creating GSAP instances.

 

Good look with your project

[5iddharth]

@alig01 That's really helpful thanks a lot!