Incredible-- I spent a solid 4 hours yesterday looking for a simple drop-in animation solution for my app and somehow missed this.
From the documentation, react-transition-group and react-motion seem quite un-intuitive and intimidating to an inexperienced dev like myself. My code looks clean, minimal and beautiful with pure react + styled-components and it looks like this will keep it that way.
I completely agree but the alternative seems to be putting information that needs attention in sticky overlays, popups and so on. I think animating it is the least horrible UX decision you can make.
Also have a look at the todo demo - https://www.react-reveal.com/examples/advanced/todo/ or the form errors - https://www.react-reveal.com/examples/advanced/ . You can try it with and without animations (use checkboxes to control that). Which one do you prefer?
These demos are a good example of using animations. It makes the experience much better, helping the user understand what happened. Good UX IMO. But a lot of websites are not using this way, but throughout the page, popping up almost every element, asking attention for almost everything. This is bad UX because is not helping the user to find what they want. It's distracting and annoying, at least for me.
From the documentation, react-transition-group and react-motion seem quite un-intuitive and intimidating to an inexperienced dev like myself. My code looks clean, minimal and beautiful with pure react + styled-components and it looks like this will keep it that way.