Animating the Virtual DOM - Sarah Drasner aka @sarah_edo at @ReactEurope 2017

We are biologically trained to notice motion: evolutionarily speaking, our survival depends on it. For this reason, animation when done well can guide your users. It can aid and reinforce spatial maps of our interfaces, and give us a sense that we understand interactions more deeply. For this reason, animation is incredibly powerful to convey meaning, but only when done well.
But animating the virtual DOM comes with some intricacies that affect our implementations. In this talk, we’ll go over animating in React with a variety of methods, comparing and contrasting each. We’ll cover add-ons like ReactCSSTransitionGroup, using external libraries like GSAP, React-Motion, motion using RxJS, and transitioning state with D3. We’ll look inside some real systems, breaking down how we can create reusable components of animation principles for interchangeable yet cohesive patterns.

[@rallokkcaz]

One of my favorite speakers! Great talk as always, also great examples and innovative ideas.

[@loriensleafs]

Great talk, examples here are both deep and understandable, thanks for taking the time to put together such a great presentation!

[@sarahdrasner4948]

You're welcome, thanks for watching! Slides for the talk are here, btw: slides.com/sdrasner/react-europe-17#/

[@SourabhKumar91]

Great talk! Even I agree that from a production perspective, it's better to have a tried and tested library like Greensock take care of the animations, and pairing it with React Transition Group Plus opens doors for new potentials. But there's one thing that I still have confusion around. Greensock operates on actual DOM elements and in React that is done in the lifecycle hooks outside the render method. And as we know that React is unaware of the DOM changes that take place outside it. So how will this problem be resolved? How to use Greensock in a way that React doesn't get confused due to the additional DOM changes when it goes for the next render?

[@pmunin]

I wish there was an official D3 + React integration to talk about

[@Cheepo2109]

Great Talk! 👏🏻👏🏻

[@dxcqcv]

So how about now 2018? Can I use Web Animations API with polyfill in real world?

[@jackquarry3345]

thank you. where 'em slides at ' ?

[@ArturCarvalho]

Here you go slides.com/sdrasner/react-europe-17#/

[@fxwan]

The root evil is single SVG node is not HW accelerated in *all* browsers.

[@ngideo]

Transforms are accellerated. 20:44

[@shishirarora8808]

animation is complex and hence often avoided