Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

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

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution


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


  • Like 3
Link to comment
Share on other sites

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.



  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.