How to use animations

[rogerhutchings]

Package

lib-classifier

I'd like us to have a think about how we use animations in the new classifier / project app. We don't use them a lot at the moment, and I think we're missing a trick. For example, we could use horizontal scrolling in and out when clicking next on the workflow, to give that physical sense of moving through a series of steps.

Links

Reading

• Jedi Principles of UI Animation
• FLIP your animations
• Animation principles

Libraries

• react-pose - animation library

[srallen]

cc @beckyrother

That's a neat looking library. Being able to animate in react has come a long way since my attempts w/ Chimp & See.

Depending on the animation, we may want to be mindful about doing some in CSS vs Javascript for performance reasons. I'm assuming React Pose is all javascript animation.

Here's a neat CSS animation REPL type site: http://www.animista.net/

[beckyrother]

Nice! Definitely on board with this. I could also see some subtle animations on the hover states for the toolbar, sliding in and out. Agree with Sarah about CSS over JS, keeping in mind people with slow connections.
Here's another little library with css animations: https://daneden.github.io/animate.css/

[srallen]

Grommet has animations built into the Box component. I refactored the Media component to use these instead of the external react-pose library.