Demystifying complex Animation creation process

in React Native

@VladimirNovick

vnovick.com

Developer Advocate

Web / Mobile / VR / AR / IoT

hasura.io

GDE, author, consultant

Auto generate high performance Realtime GraphQL on top of new or existing DB

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?

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

Announcements

66% Postgres load reduction

Hasura supports deep schema stitching

2x Performance boost 

Check Hasura out at hasura.io

https://egghead.io/lessons/graphql-create-your-graphql-api-auto-generated-with-hasura

Thanks

@VladimirNovick

vnovick.com