Jump to content


Question regarding your horizontal scrolling example

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

Glad that helped and thanks so much for the kind words.

If you want to switch plans just send me an email and i'll provide some instructions.



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