scrollSmoother overflow issue

[Jamesh]

Ive been trying for a couple of days to get this to work! 

 

Essentially I have smoothscroller working with some simple parallax effects when scrolling through the page. The issue I'm having is that if the text on the opposite site of the image is longer that the image is creates a blank at the bottom of the image (you may need to resize your viewport). Please see last section of the codepen attached. I guess this makes sense as the CSS is specifically setting the height to 100vh but does anyone know of a solution whereby the image always fills its container to mirror the height of its sibling element?

 

I thought a workaround would be to find the height of the text element and then set the image-cont-height to mirror the height and then use calc in js to add additional pixels to create the parallax effect. 

See the Pen MWQopKw by jame5 (@jame5) on CodePen

[Jamesh]

Here's a little playground of the workaround I eluded to above...still not right though

 

See the Pen ExQrepJ by jame5 (@jame5) on CodePen

 

[GreenSock]

I think that's mostly a CSS issue. Here's a version that seems to work:

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

 

However, there does appear to be some oddness with the data-speed="auto" when you have things aligned on the bottom of the container. I'm looking into that, but for now you may need to set a certain speed rather than auto in this case. And you can set the height via JS to make it 125% of its container.

[Jamesh]

Thanks Jack. I agree its certainly a CSS issue, in part. Would be great to hear your further thoughts on the 'oddness' you mentioned. All the best. James 

[Jamesh]

In the interest of helping out others, and from @GreenSock suggestions please find best solution below:

 

See the Pen QWQowjp by jame5 (@jame5) on CodePen