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

Animation tells

your story

• 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

Users

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

https://archive.nytimes.com/www.nytimes.com/interactive/2012/11/11/sunday-review/counties-moving.html

Netflix intro screen

Examples

https://material.io/design/motion/understanding-motion.html#

https://codepen.io/sdras/pen/qOdwdB

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

- Sarah Drasner

The state of animation in React

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

https://github.com/aholachek/react-animation-comparison

Why not just use CSS?

• Performant
• Clean
• Fire and forget

• No independent transforms
• Lack of physics
• Lack of controls, hard to manage complex animations

Pros

Cons

Show the demo already

Final thoughts

• 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

Resources

• [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