Mitch Masia
Building awesome products using React, React Native, GraphQL, and Elixir.
React Native Flanimations
Mitch Masia - Hexient Labs
Animations are hard
animate.css
bounce.js
animejs
magic
tween.js
velocity.js
particles.js
vivus.js
scrollreveal.js
parallax.js
three.js
kineticjs
no DOM
no CSS
Ground Up
React Native has it's own abstractions for movement
Performance
Declarative
Input/Output Relationships (limit human input)
Native (minimize passes over the bridge - UI)
4 Great Methods
Full control of all properties
Best for fully-custom movement
(spring, decay, timing)
Serializable
Start/Stop/Parallel/Stagger/Sequential
Control of overall screen layout
Best for mounting and updating components
Changing flex properties
Android :(
Pre-baked Animations
(fade, spring, bounce, zoom)
Great for mounting/unmounting
The equivalent of animate.css
Niceties on top of Animated
Coordinating animations across components
Mix of Animated and kick-ass examples (snapping, tossing, sliding)
Honorables
Let's play
React Native Flanimations
By Mitch Masia
