Demystifying complex Animation creation process

in React Native


Developer Advocate

Web / Mobile / VR / AR / IoT

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 


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


Sometimes onScroll behaviors are confused for gestures

Let's see the code



Parallax scrolling

Parallax scrolling

Parallax scrolling


Pan Responder?

Pan Responder?

JS -> Native -> JS -> Native -> JS ...




What about really complex animations?

Lottie is good, but...


  • 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


66% Postgres load reduction

Hasura supports deep schema stitching

2x Performance boost 

Check Hasura out at



React Amsterdam - Demystifying React Native

By vladimirnovick

React Amsterdam - Demystifying React Native

  • 455
Loading comments...

More from vladimirnovick