Demystifying complex Animation creation process
in React Native
@VladimirNovick
vnovick.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/320262/images/5230669/Logo.png)
Developer Advocate
Web / Mobile / VR / AR / IoT
![](https://s3.amazonaws.com/media-p.slid.es/uploads/320262/images/5768598/hasura_icon_white_200px.png)
GDE, author, consultant
![](https://s3.amazonaws.com/media-p.slid.es/uploads/320262/images/6016542/RoundSticker.png)
Auto generate high performance Realtime GraphQL on top of new or existing DB
![](https://s3.amazonaws.com/media-p.slid.es/uploads/320262/images/5768598/hasura_icon_white_200px.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/320262/images/5995500/Xdv.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/320262/images/6000644/Screenshot_2019-04-09_at_3.29.07_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/320262/images/6000648/osi_keyhole_300X300_90ppi_0.png)
connect it to any business logic using Remote Joins
run it anywhere where Docker can run
or use eventing system for 3factor.app architecture
![](https://s3.amazonaws.com/media-p.slid.es/uploads/320262/images/6124930/hasura-dumbledore.png)
GraphQL tutorials
Why do we need to Animate?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/320262/images/5230790/68430a05e2751ca25349707a0d8a8d9a.jpg)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/320262/images/5232151/ezgif-5-d3c0c92525.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/320262/images/5230757/download.gif)
You’re leaving your users in the dark
What we can change about that?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/320262/images/5232579/modal2.gif)
Action driven animations
![](https://s3.amazonaws.com/media-p.slid.es/uploads/320262/images/5231866/image1.gif)
MicroInteractions
![](https://s3.amazonaws.com/media-p.slid.es/uploads/320262/images/5231849/new-email-in-the-inbox.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/320262/images/5231850/incoming-call.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/320262/images/5231852/e0300865046217.5b42651973045.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/320262/images/5231853/8cafb952792777.591ca877e2564.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/320262/images/5231857/buttons-and-other-active-controls-should-respond-to-user-actions-with-visual-feedback.gif)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/320262/images/5235300/young-merlin-every-beginning-is-hard_730_auto_main.jpg)
He gets a Design from proud artist
![](https://s3.amazonaws.com/media-p.slid.es/uploads/320262/images/5230814/1399493207_1997832915.gif)
Something like this
How does 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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/320262/images/5234602/code.png)
Transitions
Transitions
![](https://s3.amazonaws.com/media-p.slid.es/uploads/320262/images/5234603/code1.png)
Parallax scrolling
![](https://s3.amazonaws.com/media-p.slid.es/uploads/320262/images/5234604/code2.png)
Parallax scrolling
![](https://s3.amazonaws.com/media-p.slid.es/uploads/320262/images/5234606/code3.png)
Parallax scrolling
![](https://s3.amazonaws.com/media-p.slid.es/uploads/320262/images/5234607/code4.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/320262/images/6354153/Screen_Shot_2019-07-12_at_5.33.41.png)
Gestures
Pan Responder?
Pan Responder?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/320262/images/5235274/magic-fail.jpg)
JS -> Native -> JS -> Native -> JS ...
Reanimated
+
react-native-gesture-handler
What about really complex animations?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/320262/images/5235323/lottie.gif)
Lottie is good, but...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/320262/images/5234614/beware-of-monsters3.png)
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
Announcements
"Back to school" workshops
last 2 weeks of August
- React Native animations workshop
- React Native AR workshop
- ReasonReact workshop
- React Native IoT workshop
![](https://s3.amazonaws.com/media-p.slid.es/uploads/320262/images/6354965/frame.png)
Thanks
@VladimirNovick
https://youtube.com/c/VladimirNovickDev
vnovick.com
Demystifying React Native Animation creation process
By Vladimir Novick
Demystifying React Native Animation creation process
- 1,639