Presentations
Templates
Features
Teams
Pricing
Log in
Sign up
Log in
Sign up
Menu
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
Resume presentation
React Native Flanimations Mitch Masia - Hexient Labs
React Native Flanimations
By Mitch Masia
Made with Slides.com
React Native Flanimations
8 years ago
1,081
Mitch Masia
Building awesome products using React, React Native, GraphQL, and Elixir.
hexientlabs.com
More from
Mitch Masia
BESbswy
BESbswy
BESbswy
BESbswy
