Parallax/Image full reveal on scroll using scrolltrigger and some css "hacks"

[Policsek]

!!! Open the codepen in a new tab, I used foundation for mark-up, so first image should be very-very small ( large-2 ), otherwise maybe you won't see any problem.

 

Hey. I'm trying to achieve is the following image scroll effect: https://dennissnellenberg.com/about ( first image ).

Let me give you some context:

• "image-container" in CSS file is used to give the actual image a "height", based on the aspect ratio of the image, so I am giving each "image-container" a specific padding-bottom, in order to fit the image's aspect ratio ( in real world, if the user changes an image with another, I want to keep the aspect ratio, so the website doesn't "brake" )
• I used "image-container" with overflow:hidden, so the actual image can "hide" somewhere, on scroll
• also, I have a background-color: red on "image-container" so you can see the entire "image-container" height; this is only for dev mode; for production, I would set the background-color to nothing/white

 

Nothing fancy for now. If you don't run the JS file, everything works just fine. You won't see any background-image: red. In order to achieve the desired animation, I am using scroll trigger. So, when "image-container" gets into view-port, I am giving the actual image a "yPercent: someValue",  therefore, at first look, everything works ok. But the problem is that I don't want to see any "red color" on scroll. At the end, the background-color will be set to nothing, so imagine if you had some text above the images ( above "image-container" ), if the "image-container" is not exactly in the center of the view-port, that text would "behave" like if you have set a margin-bottom ( or margin-top on "image-container" ).  

 

Guys, I may not be very clear, but I hope you get something of what I am trying to achieve. Maybe is not a GSAP problem, but here are many creative devs that might help me. 

 

Thanks!

 

See the Pen JjMREYK by bogdan-florin (@bogdan-florin) on CodePen

[Trapti]

Hey,  Here is one approach I gave scaleY to the image and then moving in y direction with transforms. The idea is the container should be as it  and the image inside the container should move in y direction which is happening. Since it is transforming it is leaving the space above and below as image is also same size as the container. if you check the reference you have provided. The image seems elongated as you scroll, which means that image is bigger in size than container. I did it via scaling just to test but there can be other ways as well.

See the Pen e517e5b3fd75f8e3c514172ef2dedf08 by tripti1410 (@tripti1410) on CodePen

These are reference pens may be they will be useful to you 

See the Pen mdVMOjr?editors=0010 by celli (@celli) on CodePen

 

See the Pen KKVNBpg?editors=1010 by celli (@celli) on CodePen

 

[Policsek]

Thank you for your time! 
 

Yes, I thought about scaling the actual image. My somewhat-solution was to give it a scale ( not just on Y, so I do not strech the image, but both x and y ), but due the overflow:hidden of the "image-container " I would lose some details of the right-left part of the actual image. 
 

I feel I'm really close to solve this problem, but I'm missing something.

[Cassie]

You can calculate the difference in the heights using functional values so that you don't get any red space, and you can use object position to adjust the position of the image ☺️

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