How can I run my code not from the beginning of the page, but when scrolling to a certain section of the page using gsap scrollTriger?

[Igor Cher]

I have a "container" block in my project (it is located at the end of the page), which implements a custom Z-axis scroll. The problem is that the code starts firing from the very beginning of the page, while I need it to start firing specifically for the "container" block.  And when passing the "container" block, the code should stop working. Tell me how to implement this functionality using gsap scrollTriger?

See the Pen dygVpmj by raeqpzoz-the-lessful (@raeqpzoz-the-lessful) on CodePen

[GreenSock]

It's very easy with ScrollTrigger to trigger things when that container enters/leaves the viewport and tie the progress to some animation. I glanced at your code and it looks to me like you could totally refactor that, but I'm not entirely sure what effect you're aiming for. Here's a quick crack at it: 

See the Pen ExdwZZY?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Hopefully that gets you going in the right direction. 

 

Have fun!

[Igor Cher]

Thank you very much. This is really the result I was trying to achieve. But, unfortunately, this method has very low performance and when scrolling the page back (from bottom to top), a very strong frame loss and very strong lags are obtained. I will try to create a new question on the same topic, but with a more specific example. I believe that you can help me.

[GreenSock]

Yeah, that looks like a browser rendering thing. If I were you, I'd try just doing it with regular scale instead of doing a z animation with perspective.