Jump to content

Scrollmagic horizontal slide effect with vertical GSAP gradient

Recommended Posts



I am using GSAP and scrollmagic, and I want to make a slide show of sorts.


I want to scroll down the page vertically and have the slides transition in horizontally. Almost exactly like this!


However, I want the background of the entire page to be a vertical gradient that is always black on top but changes colors on the bottom. My codepen has this gradient working perfectly, except you have to scroll horizontally.


In the middle of each slide I want to have a section with some information. In my codepen this is illustrated by the blue box.


Basically I want the blue boxes to keep sliding in horizontally and have the background keep changing like it currently is in my pen. The only difference is I want the whole thing to happen on a vertical scroll like the forum post above.


Anyone know how I could do this? Some help would be greatly appreciated.

See the Pen KjwqwX by anon (@anon) on CodePen

Share this post

Link to post
Share on other sites

Hi Mikel,


Thank you for your help!


Sorry, I don't think i was so clear. I would like there to be no horizontal scrolling on the page at all - I would like the users vertical scroll to make the slides move in horizontally.

Share this post

Link to post
Share on other sites

Yeah, this is really a ScrollMagic question and we need to keep the focus on GSAP.


Their support area is here:



Premium support:



That being said, here is a fork of my demo from the other thread you listed. I've just added a new scene to animate the body background color as you scroll through the panels. It should get you started.


See the Pen EBjKEb by PointC (@PointC) on CodePen


Happy tweening.

  • Like 1

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.