Animation Resources & Articles

Resources

Performance related

Chrome Devtools: https://www.youtube.com/watch?v=U9xfYbKxosI
http://blogs.adobe.com/webplatform/2014/03/18/css-animations-and-transitions-performance/ http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ https://developers.google.com/web/fundamentals/design-and-ui/animations/animations-and-performance?hl=en http://www.html5rocks.com/en/tutorials/speed/rendering/ https://www.smashingmagazine.com/2013/03/animating-web-gonna-need-bigger-api/ https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108#.rvx1z9na8

Design / interaction related

http://www.slideshare.net/CrowChick/communicating-animation-slides https://material.google.com/motion/material-motion.html# https://medium.com/@adaptivepath/jedi-principles-of-ui-animation-2b88423b1dac#.rkjkb08go https://www.smashingmagazine.com/2016/03/integrate-motion-design-animation-ux-workflow/ http://alistapart.com/article/motion-with-meaning-semantic-animation-in-interface-design http://valhead.com/2016/05/05/how-fast-should-your-ui-animations-be/

From Designing Interface Animation

• Making Instructional Animations More Effective: A Cognitive Load Approach, Paul Ayres and Fred Paas: http://rfld.me/1ScKuLV.
• Attention Cueing as a Means to Enhance Learning from an Animation, B.B. de Koning (Björn), H.K. Tabbers (Huib), R.M.J.P. Rikers (Remy),  and G.W.C. Paas (Fred) 2008-04-10: http://rfld.me/1S9UUtF.
• Optimising Learning from Animations by Minimising Cognitive Load: Cognitive and Affective Consequences of Signalling and Segmentation Methods, Roxana Moreno: http://rfld.me/1YvF54j
• Does Animation in User Interfaces Improve Decision Making? Cleotilde Gonzalez: http://rfld.me/1Qa1VbH.
• Does Animation Help Users Build Mental Maps of Spatial Information? Benjamin B. Bederson, and Angela Boltman: http://rfld.me/23IkGwh
• Animating Anthropomorphism: Giving Minds to Geometric Shapes, Jason G. Goldman on March 8, 2013: http://rfld.me/1Si0aRa or https://archive.is/aojec.
• The film from the Fritz Heider and Marianne Simmel study: http://rfld.me/1MwhYpu.

Possible libs to consider

http://anime-js.com/
https://github.com/chenglou/react-motion
https://github.com/callemall/material-ui/ (see https://github.com/callemall/material-ui/blob/master/src/Dialog/Dialog.js#L95)

React Animation Docs

https://facebook.github.io/react/docs/animation.html
https://www.tutorialspoint.com/reactjs/reactjs_animations.htm