Change pinned horizontal scroll to vertical scroll when scroll back to top

[Arunkrs]

Hi everyone,

I need a help as I'm experimenting with GSAP and Locomotive Js. I pinned a section that scroll horizontal and when I scroll back to top it goes in same way, but I want to skip that horizontal scroll when scrolling back to top.

See the Pen qBNvrRQ by cameronknight (@cameronknight) on CodePen

[GreenSock]

Welcome to the forums, @Arunkrs. Are you saying that after you scroll past that section, you want it to remain stuck to the right side, not moving horizontally back to where it started? So it would become impossible for the user to get back to where they started (at least in that horizontally-moving part)? If so, that's highly unusual and as a user, I'd find that quite frustrating but with enough custom code it probably is doable. I just want to make sure I'm understanding your goal correctly first. 

[Arunkrs]

Thank you for reply @GreenSock.

Yes, you got it right. I want the page to scroll vertically when I scroll page from bottom to top instead of horizontal scroll for that particular section.

I tried using gsap.reverse(pin:false). I'm a beginner & I don't know how to do it.

[GreenSock]

46 minutes ago, Arunkrs said:

I want the page to scroll vertically when I scroll page from bottom to top instead of horizontal scroll for that particular section.

I'm still not confident we're on the same page - you said "scroll vertically instead of horizontally" but it never "scrolled" horizontally to begin with. It always scrolled vertically, but during part of the vertical scroll, it pinned that section and animated it horizontally. So the behavior you are describing creates logic issues...

 

Imagine you've got 1000px total of scroll on the page. Between 200 and 600 it pins the section and animates it horizontally. Once the user scrolls to 600, you're saying you want to basically "unhook" that horizontally-moving part so that if they start scrolling back up (let's say they go backwards to 400 position), what exactly do you expect to happen? Will the user scroll from 600 back to 200 and absolutely nothing happens on the screen? If you want it to do a "normal" scroll upward, that means you'll actually have to chop off 400px from your page, making you scrollbar suddenly change sizes. Can you see why? 

 

You filled 200-600 with that horizontal movement but you want that gone now, so you'd have to make your page 400px shorter, so 600px total scroll now instead of 1000px. And you'd have to suddenly jump the scroll to make it appear seamless, but the scrollbar will of course change sizes. 

 

Sorry, this just sounds like a very, very bad idea and I'm reluctant to help because I either misunderstand or it'll be a lot of work and in the end it'll produce a frustrating/confusing user experience.

[Arunkrs]

Thank you @GreenSock. I got your point and my solution.