Duc Mai

Full stack developer

2022-10-05

animations in react

animations in react

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.

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: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.
    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.
ReactAnimations

About me

How I describe about myself

A developer cares about climate changes and environments

A full stack js developer

A developer is interested in cloud technologies

A challenge lover

Language:

English, Swedish, Vietnamese

Email:
mrducvmv88@gmail.com
LinkedIn:
Duc Mai
Twitter:
Duke Mai
IndieHackers:
Duc Mai