Jump to content
GreenSock

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

ColinT

Members
  • Posts

    1
  • Joined

  • Last visited

Posts posted by ColinT

  1. 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

×