unable to move and trigger horizontal start and end in scrolltrigger

[dagda1]

I am having trouble with triggering a horizontal = true scrollTrigger.

No matter what I do, the left marker is as far left as possible and I cannot find the right marker :).

I am trying to pin the elements to either side of he viewport but I am not really understanding the horizontal start and end props.

See the Pen NWOaEGX by dagda1 (@dagda1) on CodePen

[akapowl]

 

Hello @dagda1

 

horizontal: true is for settings, where you are actually using the browser's native horizontal scrolling, which is not the case here.

 

You are only making the site appear to be scrolling horizontally by tweening the content to the side, while actually scrolling vertically.

 

What you'll want to have a look at is the containerAnimation property, that was build for usecases exactly like yours.

 

This 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.