How Can I Achieve This Animation Effect onScroll in Reactjs

Its a complex animation, but you can use Css keyframe animations to get it done (the 3 text sections on the left will be stacked on top of each other, and the opacity needs to be changed for the text fade effect, the magnifying glass use transform: translate property to move around and the cards will require quite a few properties to animate it. You make check out my blog on how to break down complex animations if you need help. Even though it focuses on how to make a spinner, the part on how to break down animations might be helpful)

I don't really get your question well, like do you want things like text to smoothly animate into view on page scroll or, but for which ever case you will need animation libraries for react, for simple animations I use react-reveal for complex react-spring or framer-motion libraries, check em out, don't do the all crazy css!

You can use gsap greensock.com