Animations in a stateful world
We already know how to build pure interfaces, time travel, and write undo-redo logic in a couple of lines of code. But what about animations? We always forget about them and it isn't completely clear how to implement them using (state) ↦ DOM approach. React-Motion provides a spring for more natural UIs, but what if you I'd like to run complex physics simulations?
In this talk I'm going to show what tricks I use when working with animations in React, compare different approaches (D3, React-Motion, «dirty components») and illustrate it with a dozen of interactive demos. I'm also going to be talking about how I trigger animations inside components in Redux apps and introduce a library called Redux Actuator.
The talk is a part of ongoing research I'm been doing for 4 month trying to figure out clean and declarative way to do animations in React apps.
Alexey’s main area of interest includes interactive single-page web applications built on top of React/Redux/React Saga, Ember.js and Vue.js. Passionate about UX/UI, and does his own design from time to time. Loves building datavis experiments with D3, WebGL, Canvas, Web Audio APIs etc. Worked in a couple of companies before, including a YC 2015 startup and Evil Martians team. He currently works as a cofounder and CTO in a resume.io startup — interactive resume and cover letter builder. In the meantime he runs local non-profit community Code Hipsters: they organise local IT-meetups and write frontend-digest in social media. Together they launched ficus.io — a tool for real-time polls and slides feedback during the presentations.