Pin One Element to Scroll Until Bottom of Second Element

[ColinT 1 Likes (Newbie)]

What I'm trying to accomplish feels like it should be so easy, but I just can't for the life of me seem to nail it down. 

 

I have two images, side-by-side. One image is taller and portrait, the other is smaller and landscape. They both exist in a container of which the height is set to the larger image. I want to pin the smaller image on the right so when I scroll, it scrolls the length of the second image and then they both line up at the bottom.

 

Here's how I have my ScrollTrigger object set up:
 

let brandImageBlock = document.getElementById("brand-two-images");
let brandImagePin = document.querySelector("#brand-image-pin");

ScrollTrigger.create({
  trigger: brandImagePin,
  start: "top 20%",
  end: "bottom " + brandImageBlock.offsetHeight,
  pin: brandImagePin,
});

 

Maybe I'm just thinking about the end point all wrong, but the pinned image only seems to scroll for a few pixels before stopping. 

 

See the Pen KKveZeb by ColinTravis (@ColinTravis) on CodePen

[Cassie 5,128 Likes (Superhero)]

Hey Colin,

 

Welcome to the GSAP forums!

 

You're on the right track - you need to calculate the difference between the two images and then say 'unpin when we've scrolled ?px down from 20% of the way down the viewport

See the Pen gOxKvGQ?editors=1010 by GreenSock (@GreenSock) on CodePen

If you use functional values and invalidateOnRefresh:true - the px value will be refreshed when the page reloads - just in case your styling changes at different media sizes.

Hope this helps and good luck with your project!

[akapowl 5,136 Likes (Superhero)]

Welcome to the forums @ColinT

 

Just wanted to introduce an alternative to Cassie's perfectly fine solution, since in different scenarios the calculations could become cumbersome - say you e.g. have multiple images on the left and white space in between them etc. but still want to unpin aligned with the very last image.

 

You could also define an endTrigger element and set the end dependent on that element, which in your case could look like this then (also following Cassie's recommendation of the functional value for the end)

 

    endTrigger: brandImageNotPin,
    end: () => `bottom 20%+=${brandImagePin.offsetHeight}`,

 

See the Pen c1b425c8c16ea9740eba82a2d9bae983 by akapowl (@akapowl) on CodePen