Policsek Posted March 22, 2022 Share Posted March 22, 2022 !!! 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 Link to comment Share on other sites More sharing options...
Trapti Posted March 22, 2022 Share Posted March 22, 2022 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 2 Link to comment Share on other sites More sharing options...
Policsek Posted March 22, 2022 Author Share Posted March 22, 2022 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. Link to comment Share on other sites More sharing options...
Cassie Posted March 22, 2022 Share Posted March 22, 2022 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 7 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now