Jump to content
Search Community

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

Semih test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites



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:



Happy Tweening!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...