Scaling image on horizontal scroll while sticky

[Birk]

I'm looking to make a section with horizontal scrolling with images sticky on the left and they scale down horizontally from when they meet the edge to when they leave the page. They get squished by the left side of the page. 

My problem is that only the first image scales.

 

It would be much appreciated if someone could help  

 

I've been hacking some different examples together from the forum. 

 

 

See the Pen yLQXGww?editors=1010 by BirkMarcus (@BirkMarcus) on CodePen

[Birk]

Fixed it with vanilla JS. 

let frames = document.querySelectorAll(".image-frame");
const imageWidth = 850;

window.addEventListener("scroll", function () {
  frames.forEach((element) => {
    let rect = element.getBoundingClientRect();
    if (rect.left < 0) {
      element.querySelector('.image').style.transform =
      `scale3d(${((imageWidth + element.getBoundingClientRect().left)/imageWidth)}, 1, 1)`;
      console.log(
        "change detected " + `${(imageWidth + element.getBoundingClientRect().left)} ${rect.left}`
      );
    

    }else{
      element.querySelector('.image').style.transform = "scale3d(1,1,1)";
    }
  });
});

 

[Rodrigo]

Hi @Birk and welcome to the GreenSock forums!

 

There is an issue with your end point calculations:

 

So your animation is ending as soon as it starts so there is basically no scrolling associated with each instance. Right now your calculations are returning this value: 0% -0px.

 

You have to wait for your images to be completely loaded in order to have their dimensions in order to use them correctly. Here is a fork of your codepen using the load event in the window object:

See the Pen wvQqKPK by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!