DEV Community


How Can I Achieve This Animation Effect onScroll in Reactjs

himanshurathi profile image himanshu rathi ・1 min read

I need to make this type of animation in Reactjs app
you can check animation video link here -

Discussion (2)

Editor guide
ruppysuppy profile image
Tapajyoti Bose

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)

leokaze profile image

You can use gsap