Parallax White Space Inquiry

[Sgt. Red Pepper]

Hello, 

 

I am assessing a few strategies for implementing parallax effects and came across the GSAP ScrollTrigger examples. 

 

The simple parallax sections examples works nicely when the sections occupy 100vh, but I run into issues when making the sections smaller. 

 

In the codepen example, the sections are set to occupy 60vh and they look fine in a wide view, but when the window is as narrow as possible, white spaces appear within the sections, ruining the effect. 

 

It is my understanding that the narrow viewport issue occurs because the background image dimensions are similar to the section dimensions, and so there is no natural overflow from background-size: cover.

 

Has anyone experienced and overcome this issue before? 

 

Other strategies I've tried:

1) background-attachment: fixed, this is the most simple approach

2) setting background-size to 'auto 140%' (any second value greater than 100%), and then animating fromTo backgroundPosition: '50% 100%' => backgroundPosition: '50% 0%'. This works well in most cases but, the width will be restricted on larger viewports. 

 

I think the gsap examples look the most elegant, but I am struggling to overcome the white space issue and am hoping someone may be able to provide some guidance. 

 

Thank you in advance for any help. 

 

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

[Rodrigo]

Hi,

 

This seems to be related to this comment you posted on another thread:

 

Unfortunately I ran out of time to try to get a solution for this today, but basically this boils down to get the natural dimensions of the image. Then based on the screen size and width/height ratio, and the natural width/height ratio of the image you can give the background image either it's natural size or something that gives you the amount of pixels you need for the animation.

 

This definitely needs some elbow grease to get things going and make it bullet proof. Hopefully the pointers I gave you help you getting started. When I have some time I'll try to circle back to this and see what I can come up with.

 

Finally please leave this conversation to this thread and not the one linked above.

 

Happy Tweening!

[GreenSock]

Yes, I posted an answer/solution here: 

 

Does that help? 

[Sgt. Red Pepper]

@GreenSock I responded to the other thread as well, but thank you again! I really appreciate the follow up, excellent solution.