Jump to content


ScrollTrigger markers are offset from panels in dual-column scroller

Moderator Tag
Go to solution Solved by GreenSock,

Recommended Posts



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:



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

Link to comment
Share on other sites

  • Solution

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:



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

Link to comment
Share on other sites

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. 



  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.