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

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.