Adding Buttery 🥞 Animations to Your React UI

By: Louis Novick

Animation is storytelling

It makes our apps/websites more memorable.
- We remember details
- Animations are a big part of creating a delightful experience
We can communicate to the user without words.
- Reducing the complexity of choice
- Drawing attention to things
What impression are we leaving on our users?
- Aesthetic Usability Effect

Directly supports your brand.
- Different easing, different feeling
Can leave a bad impression if done wrong.
Can be core to your offering.
- Charts - helps with the understanding of large/complex datasets
- Stepped forms
- Games / interactive experiences

Saccade - User creates a spatial map, often drawing on assumptions. For example, the menu dropdown in the top right corner.

Animation helps users with context-shifting

Animations also assist the user to navigate quickly, and confidently

Netflix intro screen

If animation feels like sugar on top it's because you treated it that way.

- Sarah Drasner

react-motion, react-spring, react-pose, react-move

gsap, velocity, animejs -

used in conjunction with react-transition-group for mount + dismount

Point being, there are a lot of tools in the shed

Pros

Cons

Animation is a powerful tool, and should be thought through ahead of time as part of the experience.
Use transform and opacity everywhere possible
- Or FLIP it
Don't overdo it
- Be subtle and consitent

[Dead Simple Animation with React Pose - JS Monthly - August 2018](https://www.youtube.com/watch?v=BSbVB14riQI)
[The Path To A Declaratively Animated Future - Matt Perry - React Conf 2018](https://www.youtube.com/watch?v=1e07uPWpvzI)
[⚡️Lightning Talk - 5 Animations You Should Know and Use - Marcos Martins - React Conf 2018](https://www.youtube.com/watch?v=w9suOaHITtk)
[Sarah Drasner - Animating in React](https://www.youtube.com/watch?v=QlmaI7x7SYo)
[What You Need to Know About Eye Movements and Your Website](https://www.crazyegg.com/blog/eye-movements-and-your-site/)
[The Importance of Context-Shifting in UX Patterns \| CSS-Tricks](https://css-tricks.com/the-importance-of-context-shifting-in-ux-patterns/)
https://popmotion.io/pose
https://github.com/davidkpiano/flipping