Nora Posted April 19, 2023 Share Posted April 19, 2023 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 Link to comment Share on other sites More sharing options...
Solution akapowl Posted April 19, 2023 Solution Share Posted April 19, 2023 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. 3 Link to comment Share on other sites More sharing options...
Nora Posted April 20, 2023 Author Share Posted April 20, 2023 Thank You! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now