Horizontal cropping animation for image on scroll

Question

I tried to replicate this effect but it snaps when you scroll up fast.

codesandox. How to make it pleasing on the eyes?

Answer 1

Well figured it out. Had to limit the width the img element was getting. console.log() showed width was reaching infinity because of scrolling which thereby put a delay on the return animation.

const maxWidth = 700. // actual maximum width of the image. 

img.style.width = `${width <= maxWidth ? width : maxWidth}px`;