ScrollTrigger markers are offset from panels in dual-column scroller

[TheBilTheory]

Hello,

 

I'm currently working on a project where I would need to pin a container and keep the scroll going in the right column. However I'm running into an issue where the ScrollTrigger markers seems to be offset with the panels. I can't get the left content ends when it reaches the next trigger.

 

Here is a simplified version:

https://codesandbox.io/s/romantic-fast-xwfefy

 

I notice that the speed of the right columns seems to be "parrallaxed" to the markers. 

 

What I am trying to do:

Coordinate the appearing of the pinned left content while scrolling the right content.

 

Thank you

[GreenSock]

Welcome to the forums, @TheBilTheory! And thanks for being a Club GreenSock member. 

 

I noticed a few problems:

1. That "parallax" appearance was just because you're animating "y" to give the fake appearance of scroll but you didn't set ease: "none" on that animation, so it'd default to power1.out, meaning it moves faster at the beginning and slower at the end. It wasn't being mapped 1:1 to the scroll position. It looks like you had it there, but it was commented out.
2. You had the "fake-scroll" animation's end set to rightPanel.scrollHeight which is a number, so it's interpreted as an absolute value. For example, if that is 500, that means it would end when the scroll position is exactly 500 whereas I believe you were trying to make it last for as many pixels as it's scrolling which would actually be rightPanel.scrollHeight - window.innerHeight (actually instead of window.innerHeight you should probably use the containing element's clientHeight to be more accurate). And you should put "+=" in front of the end value so that it's relative to the start position (not absolute). 
3. It looks like you were trying a lot of fancy stuff with endTriggers, pointing to nextPanel if there was one, etc. but I suspect you could simplify it quite a bit and just have each section's ScrollTrigger last as long as it is tall, like end: () => "+=" + currentPanel.offsetHeight
4. You had scrub AND toggleActions on various ScrollTriggers. Those are mutually exclusive. I think you just wanted toggleActions.
5. There's no such thing as ease: "Ease.easeOut". Maybe you meant "power1.out"?

Here's my fork with the fixes in place:

https://codesandbox.io/s/distracted-stitch-hz5k8j?file=/src/components/DualColumnScroller.tsx

 

I hope that helps! 

 

Oh, and in case it helps at all, here's a CodePen that shows something slightly similar to what you were attempting (in case you can glean anything useful from it): 

See the Pen gOeMJOV?editors=0010 by GreenSock (@GreenSock) on CodePen

[TheBilTheory]

Hey @Jack, 

 

Thanks for such a beautiful piece of software.

I've indeed tried many things before posting my question :D!

 

Thanks for the prompt response. 

I see what I did wrong now. 

 

Thanks!