Jump to content

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

Horizontal scrolling website with vertical scroll sections

Recommended Posts

I am making a website which consists of horizontally scrolled wrapper with sections. And one of the sections, when in view, have text which scrolls vertically and after text ends, main wrapper continues to scroll horizontally. I made horizontal scroll with scrollmagic and GSAP, but I am not sure if mentioned behaviour possible without use of custom scrollbar. But the problem with latter is that you need to move cursor to enable vertical scroll inside this section. 

Share this post

Link to post
Share on other sites

See the Pen QWWwWWQ by NickMatvievskiy (@NickMatvievskiy) on CodePen

Here is codepen of what I am trying to achieve

The section with black background should have scrollable text and only when we've reached the end, website should continue to scroll horizontally.

Share this post

Link to post
Share on other sites

Hey @Okami,


Take a look at fullPage.js - for example this solution and

See the Pen XbPNQv by alvarotrigo (@alvarotrigo) on CodePen

the option for callbacks.


ScrollMagic is not a GreenSock product nor is it officially supported here.


Best regards


Share this post

Link to post
Share on other sites

hi @mikel, thanks for your response. 

I am using ScrollMagic just in pair with GSAP, the latter of which makes animation described in my first post possible. I just hoped that maybe someone had similar experience or have an idea of how it can be achieved.

Unfortunately, fullPage scroll is not something that will help me here. As you can see in example I provided, I have gradual, progressive horizontal scroll with animated text appearing, which is already works with help of GSAP library. But I am still struggling to understand how to implement vertical scroll animation.

I saw some examples here with help of Scrollmagic library, so was wondering if someone can help with my case.

Thanks for your attention.

Share this post

Link to post
Share on other sites

Hey Okami and welcome to the GreenSock forums.


ScrollMagic isn't a GreenSock product and we don't support it here so you may not get a response from other forum members.

Maybe this post by our very own Craig can help you:

We really try to keep these forums focused on GSAP-specific questions. It looks like the ScrollMagic author does offer paid support which you can learn about at https://support.scrollmagic.io/.

If you have any GSAP-specific questions, we'd love to help. Good luck with your project!

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.