Jump to content
Search Community

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

Danclp test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts


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

Link to comment
Share on other sites

  • Solution

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!

Link to comment
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.
  • Create New...