GSAP animation within a horizontal scrolljack

[RyanReese]

I'm basically trying to create a proof of concept that I can do this "incremental" growth of ".expand-box" within a horizontal scrolljack. I don't care exactly what the start point trigger is, nor the end point trigger, nor what the actual animation is. I'm just trying to see if GSAP plays nice with animations within a horizontal scrolljack. I've decided to animate the width of this blue box & have it start with the left edge of ".scroll-section.two" hits the left edge of the screen, and have it end when the right edge of that same element hits the center of the browser. 

 

The end point seems to end properly (?) but the starting animation point is not correct. It starts before the left edge hits the left edge of the browser. Basically, no matter what start/end points I dictate, it seems to be calculated incorrectly. What am I missing? This is supposed to be a simple proof of concept that will be used in a much larger/complex project later on. 

See the Pen ByBRRov by ryanreese09 (@ryanreese09) on CodePen.

[Rodrigo]

Hi,

 

Most likely you're looking for the Container Animation feature from ScrollTrigger:

 

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#containerAnimation

 

That will allow you to setup a specific trigger based on the horizontal animation.

 

Hopefully this helps 

Happy Tweening!

[RyanReese]

Thank you - I'm trying to implement that now and will return if I can get it working. This looks complex.

[RyanReese]

See the Pen YPKQWpg by ryanreese09 (@ryanreese09) on CodePen.

 

Ah! I think I got it! I have managed to make it so it starts when the left edge is in the center of the screen, and end it when the left edge hits the left edge of the browser. This is fantastic. Thank you!!!!