Jump to content
Search Community

Question regarding your horizontal scrolling example

KwabenaOwusu test
Moderator Tag

Go to solution Solved by Carl,

Recommended Posts

Hi Team,

I am a GSAP newbie , Club Green Sock member , I bought a  snorklTV  creativecoding membership.

Short: I am trying my best to learn as much as I can.


Question: In the above example the container width is 600% but for the scrolltrigger you set  -> end: "+=3500".


Could let me know why 3500 px from the starting point (trigger element)?


Thank you.


See the Pen YzygYvM by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

  • Solution

Hi Kwabena,


Glad to hear you are enrolled in my courses.

Studying these demos is a great way to increase your learning!


I'm guessing in this case that the developer just chose 3500 as a number that is "big enough" to work well in most cases.


I just made a fork that uses a "function-based value" which figures out the scrollDistance based on the width of the window * number of sections.


See the Pen LYMEdZb?editors=0011 by snorkltv (@snorkltv) on CodePen



This will allow the vertical scroll distance to be the same amount that things are moving horizontally.

An added bonus of function-based values when used with ScrollTrigger is that they automatically get re-calculated on window resize.


Be sure to open the demo in a new window and watch the console for updates after you resize.


hope this helps





  • Like 2
Link to comment
Share on other sites

@Carl: Thanks very much.

Yes, I enrolled in your course three months ago (26th May ). I am currently on the monthly subscription. I think I will switch to the "lifetime" package.

BTW you are the best coding teacher. Your courses are great.

  • Like 4
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.
  • Create New...