Dbr14 Posted October 24, 2021 Share Posted October 24, 2021 I have a horizontal scrolling site using the containerAnimation with 6 sections (the section width is set to pixels and they will each eventually vary in size). I am looking to implement a parallax movement to my background images in each section - I have applied n example to the second section in my codepen (along with a few other GSAP elements i've been using). I have come across various parallax examples in the forums but none using the containerAnimation for a horizontal website so i'm struggling to execute this. Any help would be great. See the Pen NWvdybq by brawn14 (@brawn14) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted October 24, 2021 Share Posted October 24, 2021 I don't really understand your question - can you elaborate and make sure your demo is as simple as possible to really focus on the specific issue you're asking about? I wouldn't recommend animating background-image content because it's not GPU-accelerated in most browsers and I believe some also apply pixel snapping. It's better to just us a regular <img> and if you want it clipped, you can just wrap it in a <div> with overflow: hidden. For parallax, you'd just create animations on the images that move them a different distance in the same amount of time. 1 Link to comment Share on other sites More sharing options...
Dbr14 Posted October 24, 2021 Author Share Posted October 24, 2021 Ok thanks Jack, I'll give the <img> a go over a background and see how I get on, thanks for the quick response. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now