Search code examples
javascriptcssreactjsscrollframer-motion

Horizontal cropping animation for image on scroll

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

codesandox. How to make it pleasing on the eyes?

Solution

  • 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`;