Jump to content
Search Community

ScrollTrigger Image Comparison with Responsive Pin Spacer

Parris test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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!

 

ImageComparison_Mobile-min.thumb.jpg.75e08d02a756fbc647fbc4276a2dd5b3.jpg

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

Link to comment
Share on other sites

  • Solution

Welcome to the forums, @Parris! I think you'll dig it around here.

 

The problem is that you're pinning that middle section element, so it must either make space above/below so that the adjacent sections don't collapse on it and obscure it while scrolling or if you set pinSpacing: false...well...try it and you'll see what I'm talking about. It's a logic thing.

 

I assume you actually want the whole block of content to get pinned rather than just that middle section, right? The section above/below shouldn't move while the reveal is happening, right? I wrapped everything in a ".content" <div> and set the pin to that element instead here in this fork: 

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

 

Is that what you're looking for? 

  • Like 2
Link to comment
Share on other sites

Hey, that's exactly what I was after. Works whether the window is landscape or portrait! Thanks, Jack. Man, can't believe how fast I got a solution.

 

Really, I can't thank you enough!👍👍

  • Like 1
Link to comment
Share on other sites

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

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...