Demystifying complex Animation creation process

in React Native


Independent Consultant

Web / Mobile / VR / AR / IoT

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



Demystifying React Native

By vladimirnovick

Demystifying React Native

  • 811
Loading comments...

More from vladimirnovick