Intro

Implementing animations in React is not straightforward as using hooks to update states.

Why is that?.

Normally we can do animations by using transitions, keyframes with css but the problem with React that you need to update state to trigger the animations and after animation are done you need to do something else like closing an element and here problems arise since updating state in react usually performs immediately and react is not aware of how long the animations will be in css.

So what options do we have to implement animations. lets find out

1. using the traditional way of maintaining multiple versions of html markup

Eg if we want to fadeout a component so instead of hiding completely by removing the component from Dom we can just use display:none to that component. With this way you can still perform animations by using css. The downside of this approach is that the logic of that component is still there so be careful with useEffect can might trigger unexpected logics.

2. using javascript calculations, we have several good libraries for this approach

• react-spring
• framer-motion this approach has advantages that react friendly, the component will be removed completely from dom so less risks with side effect from unexpected useEffects.