How to handle the scroll event with animation in each monent's state?

I want to do a scroll event animation, here is the steps:

1. A card element(div&img, let's named it CARD) in the middle of screen;
2. Do scroll down;
3. The CARD will rotate & scale;
4. Do scroll up;
5. The CARD will rotate & scale back to step 1 state;

So generally, the CARD will rotate&scale during the scroll up/down event, now the question is how to deal with the relationship between the scroll event and CARD state in every moment? The scroll up/down will do the "reverse like" state, scoll speed also impact the CARD state.

PS: this is the demo animation site I want to follow.

https://stackoverflow.com/questions/65526570/how-to-handle-the-scroll-event-with-animation-in-each-monents-state January 01, 2021 at 08:42AM