Functional ransitions and animations give life to our product and as such we carefully
pick the easing function that reflect our tone of communication.

Animation durations may vary based on action (reference some good guide here)

Here is an easing function we repeat frequently and love:
```css
cubic-bezier(.5,0,.5,1)
```

### Entry and Exit animations
Creating entry or exit animations for a component's insertion or removal from the <abbr title="Document Object Model">DOM</abbr> can be tricky. We use [framer-motion](https://www.framer.com/motion/) to capture and add transition for these events.

Framer motion can be used for a lot more complex animations.