Trying to fake pin a section using containerAnimation in fake horizontal scroll scenario

[Nabeel_dechains]

Hello, I am trying to fake pin the panel 3 in the scenario given above by using containerAnimation but scrollTrigger's start and end position are not in the correct position.

Any help would be highly appreciated, Thanks

See the Pen WNLbWzw by Nabeel-dechains (@Nabeel-dechains) on CodePen

[Rodrigo]

Hi,

 

With container animation pinning is not possible. 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 demo here 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. 

 

This thread covers a few approaches for fake horizontal pinning:

 

Hopefully this helps.

Happy Tweening!