TutorialsCourses

Master React Native Animations

From basics to mastery of the Animated library in React Native. This course will guide you through the fundamentals of using each specific Animated function. We'll move on through basic usage with simple examples. Followed by advanced usage with simplified examples. Finally we'll go onto real world usage. Each real world example comes with a break down of each demo, followed by the building and implementation.

AuthorJason Brown
Start the Course
Master React Native Animations
88 Lessons
Intro
Why You Should Animate
LayoutAnimation vs Animated
Animating Properties
Opacity
4:48
Translate Position
3:06
Scale
2:43
Width/Height Values
2:27
Absolute Position
2:32
Interpolation
Color/Background Color
4:58
Rotation
2:58
Width/Height Percentage
2:05
Easing
1:25
Animated.Value Functions
Animated Functions
Timing
Spring
3:59
Loop
Event
2:47
Decay
8:33
Math
Add
1:43
Divide
0:58
Multiply
1:13
Modulo
1:27
Formulas
Combining Animations
Parallel
3:06
Sequence
1:51
Stagger
1:29
Delay
2:34
Combining Multiple Combined Animations
Interpolation
Numbers And Interpolates on Interpolates
5:03
Color/Background Color
2:40
Rotation
2:22
Extrapolate
3:47
Native Animations
3:21
Gestures and Animations
Decay
8:33
Maintain Touchable Items with a Parent PanResponder in React Native
Kitten Cards
25:46
Staggered Head Drag
11:30
Understanding How Animated Works
6:47
createAnimatedComponent
2:50
Using and Understanding setNativeProps
3:00
Using d3-interpolate with Animated
3:22
Using d3-interpolate-path and Animated to Animate Simple SVG Paths
2:14
Using Art, Morph.Tween, and Animated to Animate Complex SVG Paths
2:28
Using Flubber and Animated for Better SVG Path Morphing
1:26
Animated Techniques
.99 cliff
6:56
Animate Hidden
6:48
Interrupted Animations
Pointer Events
2:50
Basic Real World
4 Corners Breakdown
1:23
4 Corners
6:42
Staggered Heads Breakdown
3:19
Staggered Heads
11:30
Kitten Cards Breakdown
5:33
Kitten Cards
25:46
Stagger Form Items Visibility on Mount Breakdown
1:30
Stagger Form Items Visibility on Mount
7:07
Animated Progress Bar Button Breakdown
1:13
Animated Progress Bar Button
8:45
Dynamic Animated Notifications
Animated Questionnaire with Progress Bar Breakdown
2:24
Animated Questionnaire with Progress Bar
16:06
Advanced Real World
Photo Grid Shared Element Breakdown
2:02
Photo Grid Shared Element
30:34
Animated Color Picker Breakdown
3:04
Animated Color Picker
24:19
Floating Action Button with Menu Breakdown
1:02
Floating Action Button with Menu
19:07
Application Intro Screen Breakdown
3:19
Application Intro Screen
20:43
Evolving Write Button Breakdown
4:13
Evolving Write Button
24:04
Create a Social Comment Modal with Animated Swipe Away in React Native
8:34
Create a Horizontal Parallax ScrollView
9:57
Tap to Show Love Floating Hearts
7:15
Bounce a Heart Shaped Button in React Native on Press
4:25
Exploding Heart Button
6:19
Expanding Notify Input with Success Message
7:08
Ending
Home