I pinned the images, but they don't work properly when scrolling down. They overlap.

[Semih]

I want the contents on the left to scroll up while the images on the right change as I scroll down, with the previous image fading to opacity: 0. However, I couldn't achieve this. When I first run it, the images overlap. It works correctly only once when scrolling down. Can you help me with this problem?

 

https://stackblitz.com/edit/stackblitz-starters-zwnejb?description=A create-react-app project based on react and react-dom&file=src%2FServices.css,src%2FApp.js&title=React Starter

[Rodrigo]

Hi,

 

Is not really clear what you're trying to do TBH. You are using opacity but also clip path and I don't know how you intend to mix them actually.

 

You can check these demos to see if you can borrow some logic from them:

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

 

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

 

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

 

Finally you can use GSAP MatchMedia inside the useGSAP hook, which is what we recommend to:

https://stackblitz.com/edit/vitejs-vite-pfhzkf?file=src%2FApp.jsx

 

Happy Tweening!