Master React Native Animations

Simple, easy to follow, step-by-step lessons for every type of animation
Master React Native Animations
File Size :
3.74 GB
Total length :
8h 22m



Jason Brown


Last update




Master React Native Animations

What you’ll learn

How to use Animated, understand how Animated works, how to breakdown animations, and how to build complex animations

Master React Native Animations


You should be able to create a React Native component, and understand basic layout


Animations are fundamental to user experience. When it comes to building a mobile app they have been generally difficult and cumbersome to add.Now with the power of React Native and the Animated library, enhancing your applications experience has been easier than ever!
In this course we’ll start by walking through all of the functions and animation types that you can leverage with React Native.We’ll step it up to some advanced topics live interpolating colors, rotations, using extrapolate, .99 cliffs, interrupted animations and many more concepts.After that we’ll learn how Animated actually works and rebuild some custom animations using d3-interpolate and other libraries to animate SVG paths.
Finally we get to the real world. We’ll use our new found knowledge of Animated to breakdown animations into their pieces, and then rebuild them with the Animated library.
Overall you’ll emerge with a new found understanding of animations in general, but the skills to be able to build any animation you want with React Native and Animated.


Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Why You Should Animate

Lecture 3 LayoutAnimation vs Animated

Section 2: Animating Properties

Lecture 4 Intro

Lecture 5 Basic Animated and Animated.timing

Lecture 6 Opacity

Lecture 7 Opacity Explanation

Lecture 8 Translate Position

Lecture 9 Translate Position Explanation

Lecture 10 Scale

Lecture 11 Scale Explanation

Lecture 12 Width/Height Values

Lecture 13 Width/Height Values Explanation

Lecture 14 Absolute Position

Lecture 15 Absolute Position Explanation

Lecture 16 Interpolation

Lecture 17 Color/Background Color

Lecture 18 Color/Background Color Explanation

Lecture 19 Rotation

Lecture 20 Rotation Explanation

Lecture 21 Width/Height Percentage

Lecture 22 Width/Height Percentage Explanation

Section 3: Animated.Value Functions

Lecture 23 Explanation

Lecture 24 Easing

Lecture 25 Easing Explanation

Section 4: Animated Functions

Lecture 26 Timing

Lecture 27 Spring

Lecture 28 Spring Explanation

Lecture 29 Loop

Lecture 30 Event

Lecture 31 Event Explanation

Lecture 32 Decay

Lecture 33 Decay Explanation

Lecture 34 Math

Lecture 35 Add

Lecture 36 Add Explanation

Lecture 37 Divide

Lecture 38 Divide Explanation

Lecture 39 Multiply

Lecture 40 Multiply Explanation

Lecture 41 Modulo

Lecture 42 Modulo Explanation

Lecture 43 Formulas

Section 5: Combining Animations

Lecture 44 Intro

Lecture 45 Parallel

Lecture 46 Parallel Explanation

Lecture 47 Sequence

Lecture 48 Sequence Explanation

Lecture 49 Stagger

Lecture 50 Stagger Explanation

Lecture 51 Delay

Lecture 52 Delay Explanation

Lecture 53 Combining Multiple Combined Animations

Section 6: Interpolation

Lecture 54 Numbers And Interpolates on Interpolates

Lecture 55 Numbers And Interpolates on Interpolates Explanation

Lecture 56 Color/Background Color

Lecture 57 Color/Background Interpolate Explanation

Lecture 58 Rotation

Lecture 59 Rotation Explanation

Lecture 60 Extrapolate

Lecture 61 Extrapolate Explanation

Section 7: Native Animations

Lecture 62 Video

Lecture 63 Explanation

Section 8: Gestures and Animations

Lecture 64 Maintain Touchable Items with a Parent PanResponder in React Native

Section 9: Understanding How Animated Works

Lecture 65 Animated Internals

Lecture 66 createAnimatedComponent

Lecture 67 createAnimatedComponent Explanation

Lecture 68 Using and Understanding setNativeProps

Lecture 69 Using and Understanding setNativeProps Explanation

Lecture 70 Using d3-interpolate with Animated

Lecture 71 Using d3-interpolate with Animated Explanation

Lecture 72 Using d3-interpolate-path and Animated to Animate Simple SVG Paths

Lecture 73 Using d3-interpolate-path and Animated to Animate Simple SVG Paths Explanation

Lecture 74 Using Art, Morph.Tween, and Animated to Animate Complex SVG Paths

Lecture 75 Using Art, Morph.Tween, and Animated to Animate Complex SVG Paths Explanation

Lecture 76 Using Flubber and Animated for Better SVG Path Morphing

Lecture 77 Using Flubber and Animated for Better SVG Path Morphing

Section 10: Animated Techniques

Lecture 78 Intro

Lecture 79 .99 cliff

Lecture 80 .99 Cliff Explanation

Lecture 81 Animate Hidden

Lecture 82 Animate Hidden Explanation

Lecture 83 Interrupted Animation

Lecture 84 Pointer Events

Lecture 85 Pointer Events Explanation

Section 11: Basic Real World

Lecture 86 4 Corners Breakdown

Lecture 87 4 Corners

Lecture 88 4 Corners Explanation

Lecture 89 Staggered Heads Breakdown

Lecture 90 Staggered Heads

Lecture 91 Staggered Heads Explanation

Lecture 92 Kitten Cards Breakdown

Lecture 93 Kitten Cards

Lecture 94 Kitten Cards Explanation

Lecture 95 Stagger Form Items Visibility on Mount Breakdown

Lecture 96 Stagger Form Items Visibility on Mount

Lecture 97 Stagger Form Items Visibility on Mount Explanation

Lecture 98 Animated Progress Bar Button Breakdown

Lecture 99 Animated Progress Bar Button

Lecture 100 Animated Progress Bar Explanation

Lecture 101 Dynamic Animated Notifications

Lecture 102 Animated Questionnaire with Progress Bar Breakdown

Lecture 103 Animated Questionnaire with Progress Bar

Lecture 104 Animated Questionnaire Explanation

Section 12: Advanced Real World

Lecture 105 Photo Grid Shared Element Breakdown

Lecture 106 Photo Grid Shared Element

Lecture 107 Photo Grid Shared Element Explanation

Lecture 108 Animated Color Picker Breakdown

Lecture 109 Animated Color Picker

Lecture 110 Animated Color Picker Explanation

Lecture 111 Floating Action Button with Menu Breakdown

Lecture 112 Floating Action Button with Menu

Lecture 113 Floating Action Button with Menu Explanation

Lecture 114 Application Intro Screen Breakdown

Lecture 115 Application Intro Screen

Lecture 116 Application Intro Screen Explanation

Lecture 117 Evolving Write Button Breakdown

Lecture 118 Evolving Write Button

Lecture 119 Evolving Write Button Explanation

Lecture 120 Create a Social Comment Modal with Animated Swipe Away

Lecture 121 Create a Horizontal Parallax ScrollView

Lecture 122 Tap to Show Love Floating Hearts

Lecture 123 Bouncing Heart Shaped Like Button on Press

Lecture 124 Exploding Heart Button

Lecture 125 Expanding Notify Input with Success Message

Section 13: Ending

Lecture 126 End

Anyone who wants to learn how to do animations with React Native

Course Information:

Udemy | English | 8h 22m | 3.74 GB
Created by: Jason Brown

You Can See More Courses in the Developer >> Greetings from

New Courses

Scroll to Top