Horizontal scrolling to vertical scrolling issue ( GSAP + ScrollTrigger)

[Nathan LOHEAC]

Hi community, 

Im' a beginner with GSAP and ScrollTrigger and I'm running into an issue. My goal is for the user to scroll horizontally through 6 sections, and after the 6th section, the scrolling should switch back to vertical to display the final section (simply as that, ahah).

Right now, instead of that, a large (undesired) section appears after the 6th sectoin (maybe a problem with the "pin"?). I've tried many things to debug it, but I just can't figure it out.

 

Code here : 

 

Thank you so much for any help or advices

See the Pen gbaPeXW by Nathan-Loheac (@Nathan-Loheac) on CodePen.

[Rodrigo]

Hi @Nathan LOHEAC and welcome to the GSAP Forums!

 

just change this:

xPercent: -100 * (totalSections - 1),

To this:

x: () => (window.innerWidth - village.scrollWidth),

Right now you're animating that section it's entire width times the number of child elements/slides, that's why the element gets so far to the left. With the change I suggested you'll animate the element the width of the browser window minus the width of the entire section.

 

Hopefully this helps

Happy Tweening!