Learn Reanimated 2

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 2h 53m | 1.15 GB

Build Delightful Gestures and Animations using Reanimated 2. This new version, currently in alpha, enables using JavaScript on the UI thread to compute animation frames. The goal being as always to build user experiences that run at 60 fps, even on low-end devices.

Worklets & Shared Values
When writing gestures and animations with React Native, the key to success is to avoid frame drops. In version 2, we use the notion of worklets: JavaScript functions that run on the UI thread to compute animation frames. These worklets have exciting properties and ways to communicate to the main JavaScript thread. Worklets operate with shared values: animation values that are available on both the UI and JS thread.

Side Effects & Scopes (Coming Soon)
In Reanimated 2, animations are written imperatively using JavaScript. Their execution model is, however, declarative. It is very similar to the way React works. You write a function, and the library takes care of the rendering for you. What about side-effects? That is the topic we are exploring in this lesson.

Pan Gesture
In this lesson, we build our first gesture. We drag a card around and make sure that the movements of the card are within the bounds of the container. We also remember the position across different gestures. When the gesture ends, we add some momentum to the card, giving it a feel of being a physical object.

Transitions
Transitions are the easiest way to animate React Native components. And in this lesson, we take a look at how this technic looks like with Reanimated 2. Using transitions, we can assign an animation value to a React state change or an animation value change.

Higher-order Animations
Animations in Reanimated 2 are first-class citizens. They receive other animations as parameters, enabling an incredible level of composability that we are showcasing in this lesson.

Custom Animations
So far, animations have been a black box for us. We’ve learned how to use and compose them, but we don’t know to build them yet. In this lesson, we write custom animations to get familiarized with their internal API.

Circular Slider
In this lesson, we build a circular slider by using easy trigonometry concepts. We learn to smoothly go from the canvas coordinate system to the polar coordinate system back and forth to have the cursor moving around a circle. From there, we use SVG animations to draw the circular progress bar.

Graph Interactions
In this lesson, we build a user interaction on top of an SVG graph created with the help of D3. Using mathematical tools based on cubic Bèzier curves, and having scale functions available both on UI threads, we build a delightful user interaction on our Graph.

Dynamic Springs
In this lesson, we drive the movement of one item via a Pan gesture. The second item follows the position of the first item with a spring transition to add an effect of inertia. The third item follows the second item in the same manner and so on.

Drag to Sort
Ordering lists by dragging its items is a very common use-case in mobile apps. In this lesson, we are building such a user-interaction. It will require us to perfectly orchestrate gesture events and transitions on changes in the order of items.