Switch section with scroll direction

[mustafag]

Hi,

 

I am new to GSAP and i have been trying to solve this from last 3 days but no luck. Apologies if the question is silly.

 

In this project first few sections scroll horizontally and then few vertically and then again last few sections horizontally.

 

What i want to achieve is, when scroll reaches end of last section first horizontal scroll, a image starts expanding and covering the whole screen (Managed to get the effect) and when it fade out after full expansion it should show first section of vertical section.

So to make easy to understand by the time image on section H1-3 fade out, top of the section V1 should reach the top of the screen to make it feel like when image fades out i am into different section I.e. V1.

 

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

[elegantseagulls]

This is quite the complex and multifaceted ask, I think you'll want to keep your side-scroll pin engaged until you hit full overlay with the expanding image, then pin that image (this would be a good usecase for gsap's flip plugin https://greensock.com/docs/v3/Plugins/Flip) until it's over the next section (pinSpacing: False), then pin that next section as it fades out (or just overlay the next sections content over the first, under the image overlay).

[GreenSock]

Yeah, it seems like another key piece is to set things up with some of your elements overlapping. Like the whole H1-1 through H1-3 chunk would sit on TOP of the V1 so that you can simply fade it out when you're ready. And your image that fades in should sit on top of H1-3. Then tweak the timing accordingly. 

 

Good luck!

[mustafag]

Thank you for the support and suggestion. Will give a try.

 

Is there any paid support for getting certain solutions?

[Cassie]

We have a forum for freelance jobs. There are a lot of talented folks hanging out there.

Feel free to make a post explaining the help you need - maybe someone over there can help you? 

https://greensock.com/forums/forum/15-jobs-freelance/

[GreenSock]

6 hours ago, mustafag said:

Is there any paid support for getting certain solutions?

GreenSock does offer paid consulting services on a limited basis, yes. I sent you a DM about it. 👍