GSAP Keep generating Marker and the content has been push down after re-enter

[Danclp]

Hi,

I am facing some problems with my GSAP coding.

I hope someone can guide me through it.

This demo has 2 sections: ".intro_section" and ".philosophy".

After finishing all the animation from the 1st section, I am unsure why there is a big gap before the 2nd animation appears.

When the 2nd animation started, I noticed a slight jump, and I believe this is due to the pin requested for the 2nd section, but I couldn't figure out why.

When scrolling back and forth between the 1st and 2nd sections, I noticed that the system was creating more markers, and my content was being pushed even further.

I am not sure what the problem could be.

Hopefully, GSAP or some experts and give me some hints.

 

Appreciate it.

See the Pen bGQeXwN by danclp (@danclp) on CodePen

[Rodrigo]

Hi @Danclp and welcome to the GreenSock forums!

 

Unfortunately I don't have time now to dig into this since your demo is not exactly minimalist.

 

The only thing I can suggest right now is to remove all your GSAP animations and ScrollTrigger instances. Does your HTML looks the way it should? If it does then just create the animation for the final section and completely forget about the first one. Does the animation starts where it should? Then test only the animation and ScrollTrigger instances for the first section and completely remove the animations and ScrollTrigger for the second one. Does the second section is where it should be?

 

Also I noticed that you are creating the second ScrollTrigger instance after the first one is completed, I definitely wouldn't do that, just create both ScrollTrigger instances at the same time in the order they should happen.

 

Hopefully this helps. If you keep having issues, please reduce your demo as much as possible, we don't need to see your entire project, just a few colored divs and as little JS as possible, that emulate your current project and clearly illustrate the issue you're having.

Happy Tweening!

[Danclp]

Hi @Rodrigo ,

 

Thanks for the quick response.

This is my 1st project with GSAP implementation.

Let me follow your suggestion and give you a more refined demo.