DEV Community

loading...

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 - https://www.loom.com/share/777b388ceac64022afd43648ddcfcd43

Discussion (2)

pic
Editor guide
Collapse
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)

Collapse
leokaze profile image
leokaze

You can use gsap greensock.com