Animations make your web apps more fun and user friendly however it is not an easy topic in react. So lets explore what options we have for making animations with react.
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
- 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:n one 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.
this approach has advantages that react friendly, the component will be removed completely from dom so less risks with side effect from unexpected useEffects.