Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ColinT

Pin One Element to Scroll Until Bottom of Second Element

Go to solution Solved by Cassie,

Recommended Posts

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. 

 

image.thumb.png.215e84641e49a7e6a252b74ca34af63b.png

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

Link to comment
Share on other sites

  • Solution

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!

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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

 

  • Like 4
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.
×