Jump to content


  • Posts

  • Joined

  • Last visited

ColinT's Achievements

  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.