What we use to get better animations

Problem

Since we have some components being dragged or shown when being hovered, as well as micro-interactions (like tapping, clicking), it can get really messy to get toggle animations using react hooks as we have to toggle class in useEffect() hook and return a setTimeout() to toggle it again after a certain time, and the performance of those animations are limited.

To make the code maintainable and increase performance, we are using good libraries such as:

framer-motion:

Production-Ready Animation Library for React | Framer Motion

It can run animations at 60fps, while behaving well with server-side rendering and animation unmouting. So, it gives a better performance for our app, and the code to get an animation working is really short, because it has a declarative syntax. See example below:

import {motion} from 'framer-motion'

function MyComponent() {
  return <motion.div initial={{opacity: 0}} animate={{opacity: 1}}>I will fade in</motion.div>
}

wich makes our code more maintanable and readable.

react-beautiful-dnd

For the dragging and dropping feature, we think we should not reinvent the wheel so we can focus on what matters: good design, usability, and overall experience to the user. With that in mind, we chose this library to implement droppable cards between lists. It easily integrate with React and have been built by a remarkable team in Atlassian (they have a kanban themselves):

GitHub - atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with React

<aside> 💡 Note: There are other libraries out there, such as react-transition-group, or react-spring, but we chose framer-motion as it easily integrates with other libraries (emotion, react-beautiful-dnd) and NextJS server-side rendering, so it looks like we have a fully integrated design-system and components 😊.

</aside>