Master React Native Animations
4.6 (272 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,297 students enrolled

Master React Native Animations

Simple, easy to follow, step-by-step lessons for every type of animation
4.6 (272 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,297 students enrolled
Created by Jason Brown
Last updated 2/2019
English
English [Auto-generated]
Current price: $11.99 Original price: $99.99 Discount: 88% off
2 days left at this price!
30-Day Money-Back Guarantee
This course includes
  • 6.5 hours on-demand video
  • 63 articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to Udemy's top 3,000+ courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • How to use Animated, understand how Animated works, how to breakdown animations, and how to build complex animations
Course content
Expand all 126 lectures 08:23:11
+ Introduction
3 lectures 02:48
Introduction
00:42
Why You Should Animate
00:57
LayoutAnimation vs Animated
01:08
+ Animating Properties
19 lectures 36:27
Intro
00:21
Basic Animated and Animated.timing
00:58

In this lesson we'll show how Animated.timing works with opacity of elements.

Preview 04:47
Opacity Explanation
00:58

In this lesson we'll show how Animated.timing works with moving views around the screen performantly

Translate Position
03:05
Translate Position Explanation
01:24

In this lesson we'll explore how to use transform scale with Animated timing

Scale
02:42
Scale Explanation
02:26

In this lesson we'll show how animated timing works with defined width and height values.

Width/Height Values
02:27
Width/Height Values Explanation
02:05

In this lesson we'll show how Animated.timing works with absolute positioning

Absolute Position
02:31
Absolute Position Explanation
00:50
Interpolation
00:38

In this lesson we'll show how Animated.timing works with color and interpolation

Color/Background Color
04:57
Color/Background Color Explanation
00:16

In this lesson we'll show how Animated.timing works with rotation and interpolation

Rotation
02:58
Rotation Explanation
00:20

In this lesson we'll show how animated timing works with width and height percentages using interpolate

Width/Height Percentage
02:05
Width/Height Percentage Explanation
00:35
+ Animated.Value Functions
3 lectures 05:48
Explanation
03:27

In this lesson we'll show how to bring physics to timed animations using easing.

Easing
01:25
Easing Explanation
00:56
+ Animated Functions
18 lectures 25:59
Timing
00:15

In this lesson we'll show how to create more realistic animations using the `spring` method of Animated.

Spring
03:58
Spring Explanation
00:51
Loop
01:00

In this lesson we'll show the concept behind Animated `event` and how it works.

Event
02:47
Event Explanation
01:01

In this lesson we'll walk through building a drag and droppable card, that utilizes decay to add physical throwing ability. We'll also show how to use extractOffset to make moving objects easier.

Decay
08:32
Decay Explanation
00:15
Math
00:38

In this lesson we'll show how to use the `add` method of the Animated library.

Add
01:43
Add Explanation
00:20

In this lesson we'll walk through how to use the `divide` method of Animated.

Divide
00:58
Divide Explanation
00:08

In this lesson we'll show how to use the `multiply` method of Animated.

Multiply
01:12
Multiply Explanation
00:08

In this lesson we'll show how to use the `modulo` method of Animated.

Modulo
01:27
Modulo Explanation
00:34
Formulas
00:10
+ Combining Animations
10 lectures 11:55
Intro
00:20

In this lesson we'll show how Animated `parallel` works when combining multiple animations.

Parallel
03:05
Parallel Explanation
00:48

In this lesson we'll walk through how to use the `sequence` method of Animated to execute one animation after the other.

Sequence
01:50
Sequence Explanation
00:30

In this lesson we'll show how to stagger animations with the `stagger` method of Animated.

Stagger
01:28
Stagger Explanation
00:26

In this lesson we'll walk through how to use Animated `delay` along with nested animations.

Delay
02:34
Delay Explanation
00:22
Combining Multiple Combined Animations
00:29
+ Interpolation
8 lectures 24:27

In this lesson we'll explore interpolating numbers. We'll explore how to interpolate on interpolates, and also craft crazy interpolations.

Preview 05:03
Numbers And Interpolates on Interpolates Explanation
03:59

In this lesson we'll walk through the concepts of using `interpolate` to animate text color, background colors, and just the alpha channel of rgba.

Color/Background Color
02:39
Color/Background Interpolate Explanation
01:06

In this lesson we'll walk through rotations on the x and y axis using degrees, as well as radians.

Rotation
02:21
Rotation Explanation
00:50

In this lesson we'll show the different `extrapolate` settings and what effect they have when dealing with an animation.

Extrapolate
03:47
Extrapolate Explanation
04:42
+ Native Animations
2 lectures 04:49

In this lesson we'll show the effect that the `useNativeDriver` has on Animated and how long running blocking JavaScript can effect animations.

Video
03:20
Explanation
01:29
+ Gestures and Animations
1 lecture 06:11
Maintain Touchable Items with a Parent PanResponder in React Native
06:11
+ Understanding How Animated Works
13 lectures 30:58

We'll dive into the basics of how Animated works including `createAnimatedComponent`, and flushing a value through with `setNativeProps`

Animated Internals
06:46

In this lesson we'll show how to use `createAnimatedComponent` to wrap non-animated components. We'll animate other props as opposed to just animating style.

createAnimatedComponent
02:50
createAnimatedComponent Explanation
00:37

In this lesson we'll show how to use setNativeProps which is the key driver behind how Animated works.

Using and Understanding setNativeProps
03:00
Using and Understanding setNativeProps Explanation
02:20

In this lesson we'll recreate an animation that can be built with Animated interpolation, and instead build it using d3-interpolate.

Using d3-interpolate with Animated
03:22
Using d3-interpolate with Animated Explanation
01:45

In this lesson we'll walk through interpolating simple SVG paths with `d3-interpolate-path` using Animated

Using d3-interpolate-path and Animated to Animate Simple SVG Paths
02:14
Using d3-interpolate-path and Animated to Animate Simple SVG Paths Explanation
01:16

In this lesson we'll use Animated along with the Art library and react-native-svg to craft a morphing SVG path.

Using Art, Morph.Tween, and Animated to Animate Complex SVG Paths
02:27
Using Art, Morph.Tween, and Animated to Animate Complex SVG Paths Explanation
01:34

In this lesson we'll show how to use flubber in conjunction with Animated, for smooth SVG path transformation.

Using Flubber and Animated for Better SVG Path Morphing
01:25
Using Flubber and Animated for Better SVG Path Morphing
01:21
+ Animated Techniques
8 lectures 26:47
Intro
00:39

In this lesson we'll look at how to create immediate animations with a .99 cliff and still keep our animations declarative

Preview 06:55
.99 Cliff Explanation
01:07

In this lesson we'll show how to use Animated, state, and our start callback to craft an unmounting animation. We'll also mange interrupted animations.

Animate Hidden
06:47
Animate Hidden Explanation
03:40
Interrupted Animation
02:29

In this lesson we'll show off the `pointerEvents` prop and how it can be used to control what receives touch events.

Pointer Events
02:50
Pointer Events Explanation
02:17
Requirements
  • You should be able to create a React Native component, and understand basic layout
Description

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.

Who this course is for:
  • Anyone who wants to learn how to do animations with React Native