Demystifying complex Animation creation process
in React Native
@VladimirNovick
Independent Consultant
Web / Mobile / VR / AR / IoT
vnovick.com
Why do we need to Animate?
Let's talk about us
Humans are visually driven creatures
Why do we need to Animate?
- Make your app stand out
- Provide visual hints
- Define "story" of your app
- Reduce cognitive load
- Reduce cognitive friction
Cognitive load
The total amount of mental effort that is required to complete a task involving processing of information.
Cognitive friction
Cognitive friction occurs when a user is confronted with an interface that appears to be intuitive but delivers unexpected results
UI should be predictable
UI should react fluidly on user actions
Animation types
State driven animations
You’re leaving your users in the dark
What we can change about that?
Action driven animations
MicroInteractions
Magic is both in the details and in the performance.”
Dariel Fitzkee
React Native college of wizardry
Any sufficiently advanced technology is indistinguishable from magic
Arthur C. Clarke
Young Merlin knows about
- Animated
- Lottie
- Reanimated
He gets a Design from proud artist
Something like this
How Merlin even start?
Divide and conquer
- Microinteractions
- Action Driven animations
- Screen transitions
- Gesture animations / onScroll behaviors
Different style types
- scale changes
- opacity changes
- translate X and Y
Gestures
Sometimes onScroll behaviors are confused for gestures
Let's see the code
Transitions
Transitions
Parallax scrolling
Parallax scrolling
Parallax scrolling
Gestures
Pan Responder?
Pan Responder?
JS -> Native -> JS -> Native -> JS ...
Reanimated
+
react-native-gesture-handler
What about really complex animations?
Lottie is good, but...
TakeAways
-
Animations are not that scary
-
Beware of State Driven Animations
-
Tell a story in your app
-
Don't overcomplicate things
-
Reduce cognitive load and friction
-
Stick to working practices and experiences
Thanks
@VladimirNovick
vnovick.com