How to switch from horizontal to vertical scrolling and vice versa during scrolling?

[Endry]

Hello to all.  Maybe someone has time to review and correct the script -

Here is a small problem, it’s incorrect scrolling and changing the directions of the scrolling (from horizontal scrolling to vertical one and vice versa).  

There are two problems:
 1. There is a bug in the scrolling (as I understand it’s because of the vertical block takes height, such as in horizontal).
 2. The last section of the "contact block" cannot be scrolled to its full width
 Maybe we can work differently to perform this task with mix (horizontal/vertical) scrolling sections?

See the Pen JjNJLNV by tester_info (@tester_info) on CodePen.

[akapowl]

 

Hello there @Endry

 

You are using ScrollMagic here, which is not a GreenSock product - so there actually is no support for that in these forums.

GreenSock has a plugin of its own now for scroll-based animations - ScrollTrigger.

 

I strongly recommend taking a look, because it is better than ScrollMagic in pretty much every way.

And one of the best things: it is being maintained and supported.

 

There is a super neat demos-page where you'll find all sorts of stuff you can do with it, and there also are some awesome collections over on codepen - e.g. a 'ScrollTrigger Showcase' and one for 'ScrollTrigger How-To Pens'

 

In the latter you will find this demo here, which shows one possible way of how to combine vertical scrolling with multiple instances of fake-horizontal-scrolling like you intend to do. It also uses GSAP3 instead of TweenMax, so that is another plus.

 

If you need to update any of your code, you can go ahead and take a look on the migration guide - it is pretty easy.

 

Hope this will get you into the right direction.

 

See the Pen dyvygmj by akapowl (@akapowl) on CodePen.

 

[Cassie]

Hey there Endry!

I'm not certain what the issue is but a couple of things to feedback -

 

 

You're using scrollMagic here which isn't a GSAP tool - we actually have our own scroll plugin - https://greensock.com/scrolltrigger/

It goes without saying that as you're already using GSAP, it's a better choice!

You're also using deprecated syntax. Check out the migration guide for GSAP3 here.

 

 

[Cassie]

Haha. Snap @akapowl