horizontal scroll with one large image not working

[LSchneiderman]

I'd like my page to scroll normally until it gets to this one hugely wide image. Then I want it to scroll horizontally until it gets to the end of the image, and then resume scroll normally.

 

I was able to get it to work, kind of. It scrolls, but not to the end of the image, which is huge, and the image should be shrunken to fit within the height of one screen.

 

Can someone help me understand what I'm doing wrong please?

See the Pen qBJmJvq by lschneiderman (@lschneiderman) on CodePen

Edited April 26, 2023 by LSchneiderman
I made some progress, so changed my codepen

[Rodrigo]

Hi,

 

You're accessing innerWidth directly on your code. That's basically the width of the browser window including the scroll bar:

https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth

 

You should move the element it's own width minus the screen width. This seems to work the way you expect:

const image = document.querySelector(".massiveImage");

gsap.to(image, {
  x: () => - (image.clientWidth - window.innerWidth),
  ease: "none",
  scrollTrigger: {
    trigger: image,
    start: "top top",
    end: () => (image.clientWidth - window.innerWidth),
    scrub: true,
    pin: true,
    invalidateOnRefresh: true,
    anticipatePin: 1,
    markers: true,
  }
});

Hopefully this helps.

Happy Tweening!

[LSchneiderman]

Thank you, @Rodrigo!!