Jump to content


  • Posts

  • 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");
      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

    • Like 1