Jump to content
Search Community

Scrollmagic horizontal slide effect with vertical GSAP gradient

sportserh test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi!

 

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

Link to comment
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.

Link to comment
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:

https://github.com/janpaepke/ScrollMagic/issues

 

Premium support:

https://support.scrollmagic.io/

 

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
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.
×
×
  • Create New...