Mixed horizontal and vertical scroll

[NorbertN]

Hi all,

My first post here so I'd like to tell how great this plugin is.

 

I'm building a horizontal scroll site but some sections will include long text. I thought I'd pin the section and follow with animation on text div. Scrolls and tigers works well without a pin defined but as soon I try to hold horizontal scroll to animate vertical part - the section jumps. Sounds complicated but CodePen should explain it.

 

I've tried to find a solution for last 2 days.

 

Thanks in advance for any help

Norbert

See the Pen xxVaWRP by nuta76 (@nuta76) on CodePen

[ZachSaucier]

Hey Norbert and welcome to the GreenSock forums. 
 

So you're wanting:

• All the content to scroll horizontally until the text section reaches a certain point in the viewport (which point by the way?). Then
• Scroll through the text content vertically (keep the text section pinned while scrolling through it). Then
• Continue scrolling horizontally for the remainder of the content.

Am I understanding that correctly?

 

If so I think the way to go forward would be to make a timeline that does those three steps using three different tweens, all in sequence. Then you attach that timeline to the scroll position of the page and job done! You probably also want to make the length of the scrolling equal to the scroll distance of the horizontal content + the scroll distance of the vertical content.

[NorbertN]

Thank you for such quick reply. Yes, you got it correctly.

I haven't thought about it. I'll try to give it a go. It may be more complex as the example is a simplified version of what I need to build. That includes multiple vertical parts and additional animations in each section.

Thanks again,

Norbert

[ZachSaucier]

3 minutes ago, NorbertN said:

It may be more complex as the example is a simplified version of what I need to build. That includes multiple vertical parts and additional animations in each section.

I'd have a tween for each section (horizontal parts between vertical parts and the vertical parts themselves). Make sure to set the ease for each to "none". Also make sure the translation that's happening is correct. Don't worry about the ScrollTrigger part for now until you get your timeline working perfectly  

[NorbertN]

 

8 minutes ago, ZachSaucier said:

I'd have a tween for each section (horizontal parts between vertical parts and the vertical parts themselves). Make sure to set the ease for each to "none". Also make sure the translation that's happening is correct. Don't worry about the ScrollTrigger part for now until you get your timeline working perfectly  

It's more horizontal scrolled sections (side by side) with vertical parts inside the section. I just wanted to stop horizontal scroll when the section has "including-long-text" class, scroll div with text down and go further right.

Like in my CodePen, when red box with text reaches left edge of the viewport, parent section stops and text start scroll down. When it reaches bottom, parent section scrolls left and next section comes from right side.

[ZachSaucier]

Understood. That's why I made the recommendation of the approach that I did