Scrolltrigger horizontal with containerAnimation control start

[AnimatiCSS]

Hi, I created a codepen where a horizontal scrolltrigger is used.

 

If you look at box-1 in the red panel, although it is waiting to hear the X axis, it appears already animated, how can we make it wait until we are inside the ".pin" element first?

 

I need to be able to tell box-1: hey, wait until we're in the red panel first and then start controlling the X axis.

 

It's possible?

 

Thank you very much!

 

See the Pen bGadEwK by animaticss (@animaticss) on CodePen

[Cassie]

You can move the start and end triggers of the first animation like so...

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

 

Quote

I need to be able to tell box-1: hey, wait until we're in the red panel first and then start controlling the X axis.

This approach doesn't make much sense though. If your start trigger is way over to the right, by the time you get into that section the animation will have already 'fired'

[AnimatiCSS]

39 minutes ago, Cassie said:

Puede mover los disparadores de inicio y fin de la primera animación así...
 

 

 

Sin embargo, este enfoque no tiene mucho sentido. Si su disparador de inicio está muy a la derecha, cuando ingrese a esa sección, la animación ya se habrá "disparado".

 

Hello, thanks for answering.

That does not solve my problem, because if you leave the box aligned to the left as in my codepen, it continues to launch as in my example.

Yes, what I want to do makes sense, the problem is how I approach it.

[Cassie]

Then you need to move the start trigger even further to the left.

 

 start: "left 100px",

[Cassie]

Adjusting the trigger position is the solution. You just need to work out where that ideal trigger position is.

[AnimatiCSS]

5 minutes ago, Cassie said:

Then you need to move the start trigger even further to the left.

 

 start: "left 100px",

 

this does not work, what it does is that you practically do not see the animation.

The idea would be, in some way, first to launch the animations while you enter the Y axis, then go on to listen to the X axis?

How to do that?

Here I leave the codepen of what you say, and as you can see, it doesn't work, the animation is almost off the screen

 

See the Pen QWabKwB by animaticss (@animaticss) on CodePen

 

[OSUblake]

5 hours ago, Cassie said:

Adjusting the trigger position is the solution. You just need to work out where that ideal trigger position is.

 

That's the only solution I see too. Outside of that, you would have to manually trigger the animations, like in an onEnter callback or something like this.

 

See the Pen ZEpNLZa by GreenSock (@GreenSock) on CodePen

 

[Cassie]

Or you could ditch container animation and just trigger it when the container element hits the right position.

Either way, the solution is to move the triggers to the ideal position.

See the Pen 9b71cacb3e70b147ecf29b5d1b9da803?editors=0010 by cassie-codes (@cassie-codes) on CodePen