Jump to content
Search Community

Why my gsap animation don't work when I add a section in top of the scrollTrigger.

Xenex122 test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

So basically the problem here is that the animation opacity:1 will work out if it's on the first section but if its on second or other than first section..


It will not show the animation opacity:1 in the middle of its on section, You can see in my codepen.


Everything works out but if I added a new section on its top. It will not animated. Anyone can help me about this? Thank you. You can test it. Try to remove the first section and add it again and you will see the different.



See the Pen XWZaXRK by myth-vince (@myth-vince) on CodePen

Link to comment
Share on other sites

  • Solution

First of all, please don't spam the forums with multiple posts about the same topic. 


The main problem is that you're misusing containerAnimation. That's for when you're scrolling the page vertically but you want to move something horizontally. But in your case, you're moving things vertically AND scrolling vertically. That won't work. Your vertical movement is throwing off the scroll intersection points. 


You also had the "end" position set to a specific pixel value rather than a relative one that is prefixed with "+=". 


To solve this, I believe you'd need to do the math and calculate where the intersection points would be. My idea would be to create a timeline with callbacks spaced out where the intersection spots would be and then you can just run animations in those (opacity). Normally we don't provide custom solutions like this, but I was curious and enjoy a challenge, so I whipped up a demo for you with reusable functions: 


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


Side note: your demo was also far more complicated than it needed to be; if you want an accurate answer quickly, please take the time to isolate the issue with as little code and markup as possible. You had over 500 lines of HTML/CSS/JS to weed through when you probably needed less than 60 (a few colored <div> elements, one column, etc.)


I hope that helps! 

  • Like 4
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...