Multiple horizontal scrolls using ScrollTrigger

[mustafag]

Hello Everyone,

 

I am new to ScrollTrigger plugin, just need a quick help.

 

As shown in the demo, my ScrollTrigger starts with first series of sections scrolling horizontally  and when it ends another vertical scroll starts and once vertical scroll reaches its end then another (2nd) horizontal scroll starts.

 

The problem here is when 2nd horizontal scroll starts it immediately scrolls to the end section. How do i make it scroll smoothly any with scrollbar progress

 

I would also like to have little delay when we switch from horizontal to vertical

 

Will really appreciate any help on this

 

See the Pen qBrNyjZ by gulam-mustafa (@gulam-mustafa) on CodePen

[GreenSock]

The problem is that you were setting ABSOLUTE end values (numbers are interpreted as absolute scroll positions) instead of relative ones. So, for example, end: 300 would literally end when the total scroll of the whole page is exactly 300 whereas end: "+=300" would be 300 pixels past wherever the start is for that particular ScrollTrigger. 

 

// BAD
end: () => containerhrz2.scrollWidth - document.documentElement.clientWidth

// GOOD
end: () => "+=" + (containerhrz2.scrollWidth - document.documentElement.clientWidth)

I think you'd also went to set invalidateOnRefresh: true because you've got function-based tweens that I assume you want to be responsive.

 

As for some delay/padding at the start/end, you can just put your animation into a timeline and place some empty space there. So in the fork below, I made the animation's duration 1 second, and I made the tween start 0.05 seconds into the timeline, and then I put 0.1 seconds of empty space at the end using a dummy/empty tween:

See the Pen 7aa41b873a5393d1243959f426a0503a?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help?

[mustafag]

Thank you very much for this solution, this is all i need for now.