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

[Xenex122 13 Likes (Newbie)]

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

[GreenSock 18,577 Likes (Superhero)]

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! 

[Xenex122 13 Likes (Newbie)]

I'm sorry. I'm just to addicted on this kind of animation. Thank you sir..I'm very sorry for inconvenient..just so addicted on it.