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.
