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

[JulieAutobots]

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.

[GreenSock]

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.

[JulieAutobots]

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 ?

[Sgt. Red Pepper]

@GreenSock Hi Jack, I stumbled upon this thread, and your solution doesn't seem to work if I open the code pen and make the page narrow - I still see white gaps. Did anything change between now and the original post? Thanks in advance. 

 

Edited April 5, 2023 by Sgt. Red Pepper
added an image that shows issue

[GreenSock]

Great catch, @Sgt. Red Pepper. That's because when you go to an extreme enough portrait aspect ratio, there's not enough image due to the background-size being set to cover. The images get set to match exactly what their parent section is, thus there's no extra for it to expose for parallax. 

 

I've updated the original to use a completely different technique:

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

 

There's a helper function that basically resizes the background images in a way that ensures there's enough of an overlap to work with, and you can change the "movementFactor" variable to control how much the backgrounds move. You can even set it to a negative value to invert the direction. 

 

Better? 

 

Here's the OLD one for reference (DO NOT USE THIS)

See the Pen QWZyyBK?editors=0110 by GreenSock (@GreenSock) on CodePen.

[Sgt. Red Pepper]

@GreenSock Thank you! I really appreciate the response. This is a great solution. 

[macbas]

What if I don't want the images to move at all?

I altered the code slightly so each section has a frame. With backgroundimage-attachement it is possible, but doesn't work well on mobile. But for some reason I can not find a working version for desktop and mobile with an fixed image in the background for each seperate section.

 

Quote

See the Pen MYWywwa by marcobaass (@marcobaass) on CodePen.

 

[GreenSock]

@macbas I'm not seeing any problems on mobile with the demo you quoted. Did you forget to share an updated CodePen that illustrates the issue maybe? 

[Rodrigo]

4 hours ago, macbas said:

What if I don't want the images to move at all?

I altered the code slightly so each section has a frame. With backgroundimage-attachement it is possible, but doesn't work well on mobile. But for some reason I can not find a working version for desktop and mobile with an fixed image in the background for each seperate section.

Just out of curiosity, as far as I can tell images that don't move is not actually parallax also it seems that the background-attachment property can't be animated as far as I can see:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment#formal_definition

 

You can use the background-position property instead, but in that case is just better to use a regular image inside the element and just animate it's Y position and use the object-fit property in order to move the image:

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

 

See the Pen yyLOawB by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[macbas]

1 hour ago, GreenSock said:

@macbas I'm not seeing any problems on mobile with the demo you quoted. Did you forget to share an updated CodePen that illustrates the issue maybe? 

There is not really a problem :). I'm just trying to find out how to create an effect where the images don't move at all and the content scrolls over. Like in this example:

https://www.aignostics.com/

They use  the background-attachment property, why it is not properly working on mobile. As far as I found researching, the only way is with javascript. But all solutions I found so far do not work properly either.  So I was wondering if it is possiple with GSAP. So basically like in the demo just without any movement or animation of the images.

[Rodrigo]

Maybe this thread can help especially the demos by @akapowl:

Also it would be a good idea to check the specs of the background-attachment property and see how it works:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

 

Happy Tweening!

[macbas]

11 minutes ago, Rodrigo said:

Maybe this thread can help especially the demos by @akapowl:

Also it would be a good idea to check the specs of the background-attachment property and see how it works:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

 

Happy Tweening!

Yes, mdn says for iOS "fixed is recognized but has no effect". But it also has no effect on my android phone with chrome.

[Rodrigo]

Hi,

 

Yeah this is not GSAP related at all, I forked the demo by @akapowl and removed all the JS code from it and as you can see it doesn't work:

See the Pen azbNjNj by GreenSock (@GreenSock) on CodePen.

 

Here is the debug view so you can test in devices:

https://cdpn.io/pen/debug/azbNjNj

 

Is worth noticing that this is an isolated iOS issue with background-attachment: fixed which says in the MDN page that is supported but is clearly not (chrome and safari), as reported here as well:

https://developer.apple.com/forums/thread/99883

 

I'm afraid that if you want to replicate that feature on iOS you'll have to resort to other ways to achieve it 😞

 

Sorry we can't be of more help.

[macbas]

54 minutes ago, Rodrigo said:

Hi,

 

Yeah this is not GSAP related at all, I forked the demo by @akapowl and removed all the JS code from it and as you can see it doesn't work:

 

 

 

Here is the debug view so you can test in devices:

https://cdpn.io/pen/debug/azbNjNj

 

Is worth noticing that this is an isolated iOS issue with background-attachment: fixed which says in the MDN page that is supported but is clearly not (chrome and safari), as reported here as well:

https://developer.apple.com/forums/thread/99883

 

I'm afraid that if you want to replicate that feature on iOS you'll have to resort to other ways to achieve it 😞

 

Sorry we can't be of more help.

Alright. Thanks anyways. So a solution I found working is actually to put for instance two images on the body itself. And than leave gaps on the elements that scroll over to show the images. I used gsaps onLeave and onLeaveBack than to switch which image has the higher z-index. But that only works when those sections are far enough away on the page. So to wrap it up I guess the only way is to use backgound-attachment: fixed and have some fallback on mobile or only have one image in the background, which than makes js completely unneccassary. Or switch the z-index with gsap. Thats at least some options 😊