Question regarding your horizontal scrolling example

[KwabenaOwusu 7 Likes (Newbie)]

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

[Carl 11,324 Likes (Superhero)]

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

Carl

 

 

 

[KwabenaOwusu 7 Likes (Newbie)]

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

[Carl 11,324 Likes (Superhero)]

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.