Share Posted May 29, 2021 Hello, I'm new to GSAP and ScrollTrigger, so a bit unsure how to manipulate the pin spacer height. I want to make use of the Image Comparison concept as demonstrated here: . However, I want to use it on a page with other sections (that make use of other GSAP effects). The problem that I'm having on mobile is that significant extra space gets added by the pin spacer (top and bottom) when mobile and tablet views are portrait (or whenever the browser window is taller than it is wide). It's not as easy to see what is going on in the original demo because all the background area above and below the image is black. So I modified the demo, adding colored sections top and bottom to make the issue easier to see here (please squash the browser window horizontally to see the problem) : See the Pen ZEeXoWL by jcparris (@jcparris) on CodePen . In landscape view, you should see that the image top and bottom meet the colored sections without any black space. Yet in portrait view there is significant black space in-between sections (see image below). Can some one point me towards the solution? I think it might be solved using a ratio but not sure what parameter to feed the ratio into. Thanks! See the Pen oNjgEjm by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
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 account
Already have an account? Sign in here.Sign In Now