move element one by one on horizontal scroll

[Nora]

hello,

I have images and I want every image when it reach to specific point of screen move up and when pass that point reset to original state one by one not all of them together .. it work fine on vertical scroll but not horizontal 

 

See the Pen ZEqpJrE by nora10 (@nora10) on CodePen

[akapowl]

Hello there, Nora.

 

containerAnimation is very likely the feature you are looking for. Give it a shot and let us know if you run into any issues along the way.

 

This right here is from the ScrollTrigger docs:

 

containerAnimation

Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a  See the Pen 9be5d371346765a8c9a426e8f65f1cea by GreenSock (@GreenSock) on CodePen  and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger.

[Nora]

Thank You!