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
Built-in
Animated
LayoutAnimation
Community
Animatable
Interactable
Animated
Full control of all properties
Best for fully-custom movement
(spring, decay, timing)
Serializable
Start/Stop/Parallel/Stagger/Sequential
LayoutAnimation
Control of overall screen layout
Best for mounting and updating components
Changing flex properties
Android :(
Animatable
Pre-baked Animations
(fade, spring, bounce, zoom)
Great for mounting/unmounting
The equivalent of animate.css
Interactable
Niceties on top of Animated
Coordinating animations across components
Mix of Animated and kick-ass examples (snapping, tossing, sliding)
Honorables
pose
@shoutem/animation
lottie-react-native
react-native-deck-swiper
react-native-animated-list
react-native-snap-carousel
Let's play
Made with Slides.com