horizontal scrolling the contents while keeping the background and background animations fixed

[jatinsangwan]

Hi,

I am fairly new in gsap as well as JavaScript and I just started working on something to give it a try. I'm trying to achieve a fairly simple effect based on horizontal scrolling. 

 

The idea is to make a section in a webpage in which the background image/color and background animation is fixed to that viewport but the contents (like title, subtitle, etc.) scroll horizontally....

[akapowl]

 

Hey @jatinsangwan

 

Before diving into scrollbased animations right away, a great point to get started with GSAP is this article in the learning center

 

 

 

When you've got a good grasp of how the basics work, you could dive deeper into ScrollTrigger

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

 

... and maybe take a look on how one of the various examples for horizontal scrolling on the ScrollTrigger demos page work, for example this one here

 

See the Pen YzygYvM by GreenSock (@GreenSock) on CodePen

 

 

 

For what you want to achieve it sounds like you'd first want to make sure that each of those individual panels has a background of 'none' or 'transparent'.

For your fixed background image, you could add a div inside the container before all those panels, which is positioned 'fixed' with a width and height resembling the window's dimensions and a background-image attached or a background-color set, and you should be good to go.

 

Give it a try and let us know if you run into any specific issues, and we'll see how we can help.