React and the FLIP Technique - Alex Holachek @ ReactNYC

The FLIP technique helps us create performant animations that can make our UIs more beautiful and intuitive. First, I’ll review the basics -- what FLIP is and how it's implemented. Next, I’ll discuss why FLIP works particularly well with React’s lifecycle methods and its declarative approach to building the DOM. Finally, I’ll survey various types of FLIP animations, from the simple to the more advanced, as well a library I’ve been working on, react-flip-toolkit, that facilitates the implementation of complex FLIP animations in React.

RESOURCES

Demo App
http://react-flip-toolkit.surge.sh

React Flip Toolkit
https://github.com/aholachek/react-fl...

Intro to FLIP by Apul Lewis, who invented the technique
https://aerotwist.com/blog/flip-your-...

Step-by-step explanation of FLIP list transitions in React by Josh Comeau
  / animating-the-unanimatable  

FLIP introductory article by David Khourshid
https://css-tricks.com/animating-layo...

CSS GPU Animation: Doing It Right
https://www.smashingmagazine.com/2016...