Jump to content

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

Parallax Background Image with Horizontal containerAnimation

Recommended Posts

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

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. 

  • Like 1
Link to comment
Share on other sites

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

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.