Jump to content

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

ScrollTrigger & Parallax Backgrounds: How to avoid white around the image

Go to solution Solved by GreenSock,

Recommended Posts

Hello! I'm trying to get ScrollTrigger-powered parallax background images to cooperate, and would appreciate a nudge in the right direction. Basically what I've noticed is that if the section with the parallax background image isn't 100% of the viewport height, and/or the background images given are inconsistent sizes across different sections, I end up seeing white around the edges of the image.


I'm following the parallax background demo code closely, so I modified that codepen to demonstrate the issue I'm facing. All I changed were the dimensions of the picsum background images, and the section height from 100vh to 60vh. As you scroll through, you should be able to see white peeking around the top and/or bottom of the images depending on your screen size. 


Is there any way to make sure this doesn't happen? I can't rely on consistent section heights or background image dimensions.


Thank you!

See the Pen bGLQoyV by jbarkun (@jbarkun) on CodePen

Link to comment
Share on other sites

  • Solution

It's basically a math issue with ratios :)


Here's how I'd do it and I changed things to use function-based values and set invalidateOnRefresh: true to keep things responsive. Resize and you'll see that it all still works. 👍


See the Pen rNJQPXz?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 4
Link to comment
Share on other sites

You are amazing; my math wasn't strong enough to figure out what was going on. I've tested your solution on a couple different areas, and so far it's working consistently! Thank you for your help 😁

  • 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.