Master React Native Animations

Intro Preview 00:21

Basic Animated and Animated.timing Preview 00:54

Opacity Preview 04:47

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

Opacity Explanation Preview 00:54

Translate Position Preview 03:05

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

Translate Position Explanation Preview 01:17

Scale Preview 02:42

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

Scale Explanation Preview 02:09

Width/Height Values Preview 02:27

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

Width/Height Values Explanation Preview 01:46

Absolute Position Preview 02:31

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

Absolute Position Explanation Preview 00:43

Interpolation Preview 00:38

Color/Background Color Preview 04:57

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

Color/Background Color Explanation Preview 00:15

Rotation Preview 02:58

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

Rotation Explanation Preview 00:20

Width/Height Percentage Preview 02:05

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

Width/Height Percentage Explanation Preview 00:33

Explanation Preview 03:14

Easing Preview 01:25

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

Easing Explanation Preview 00:52

Timing Preview 00:13

Spring Preview 03:58

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

Spring Explanation Preview 00:47

Loop Preview 00:52

Event Preview 02:47

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

Event Explanation Preview 00:56

Decay Preview 08:32

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 Explanation Preview 00:15

Math Preview 00:37

Add Preview 01:43

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

Add Explanation Preview 00:15

Divide Preview 00:58

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

Divide Explanation Preview 00:05

Multiply Preview 01:12

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

Multiply Explanation Preview 00:05

Modulo Preview 01:27

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

Modulo Explanation Preview 00:28

Formulas Preview 00:09

Intro Preview 00:20

Parallel Preview 03:05

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

Parallel Explanation Preview 00:41

Sequence Preview 01:50

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

Sequence Explanation Preview 00:25

Stagger Preview 01:28

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

Stagger Explanation Preview 00:24

Delay Preview 02:34

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

Delay Explanation Preview 00:18

Combining Multiple Combined Animations Preview 00:26

Numbers And Interpolates on Interpolates Preview 05:03

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

Numbers And Interpolates on Interpolates Explanation Preview 03:27

Color/Background Color Preview 02:39

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 Interpolate Explanation Preview 00:57

Rotation Preview 02:21

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

Rotation Explanation Preview 00:41

Extrapolate Preview 03:47

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

Extrapolate Explanation Preview 03:54

Video Preview 03:20

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

Explanation Preview 01:21

Maintain Touchable Items with a Parent PanResponder in React Native Preview 05:36

Animated Internals Preview 06:46

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

createAnimatedComponent Preview 02:50

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 Explanation Preview 00:34

Using and Understanding setNativeProps Preview 03:00

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

Using and Understanding setNativeProps Explanation Preview 02:00

Using d3-interpolate with Animated Preview 03:22

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 Explanation Preview 01:23

Using d3-interpolate-path and Animated to Animate Simple SVG Paths Preview 02:14

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 Explanation Preview 01:04

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

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 Explanation Preview 01:21

Using Flubber and Animated for Better SVG Path Morphing Preview 01:25

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 Preview 01:06

Intro Preview 00:38

.99 cliff Preview 06:55

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

.99 Cliff Explanation Preview 01:04

Animate Hidden Preview 06:47

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 Explanation Preview 03:05

Interrupted Animation Preview 02:07

Pointer Events Preview 02:50

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

Pointer Events Explanation Preview 01:59

4 Corners Breakdown Preview 01:22

In this breakdown we'll talk about the process of breaking down an animation that deals with movement.

4 Corners Preview 06:42

In this lesson we'll show how to dynamically measure an element and craft animations to move it to each corner of the screen.

4 Corners Explanation Preview 03:06

Staggered Heads Breakdown Preview 03:19

In this breakdown we'll analyze moving heads and talk about how to determine which gesture callback of `PanResponder` you'll need.

Staggered Heads Preview 11:30

In this tutorial we'll walk construct animations that are executed in the `onPanResponderMove` function. We'll also rebuild `stagger` using `delay` and `sequence`

Staggered Heads Explanation Preview 03:38

Kitten Cards Breakdown Preview 05:32

In this breakdown we'll walk through the anatomy of a drag, and what aspects to look out for so you know callbacks will be required when you use a PanResponder

Kitten Cards Preview 25:46

In this tutorial we'll walk through how to build out a draggable card system to make decisions. As well as crafting fading and scaling animated transitions using state, componentDidUpdate callbacks, and start callbacks from Animated.

Kitten Cards Explanation Preview 10:07

Stagger Form Items Visibility on Mount Breakdown Preview 01:30

We'll walk through breaking down the animations that are happening to our form fields becoming visible on mount.

Stagger Form Items Visibility on Mount Preview 07:07

In this tutorial we'll show how to use `stagger` and `componentDidMount` to create animated effects on first render. Additionally how to focus on a specific input at the correct time.

Stagger Form Items Visibility on Mount Explanation Preview 04:03

Animated Progress Bar Button Breakdown Preview 01:13

In this breakdown we'll take a look at the concept behind placing a progress bar inside of a button.

Animated Progress Bar Button Preview 08:45

We'll first build out a simple button. Using animated interpolations and various view stylings we'll craft an animated progress bar inside of our button.

Animated Progress Bar Explanation Preview 04:12

Dynamic Animated Notifications Preview 07:28

Animated Questionnaire with Progress Bar Breakdown Preview 02:24

We'll walk through a frame by frame breakdown of an Animated questionnaire, decomposing each piece of the animation.

Animated Questionnaire with Progress Bar Preview 16:06

In this tutorial we'll build out a full screen, animated questionnaire. We'll show how to use state, start callback, and componentDidUpdate to craft a swap technique.

Animated Questionnaire Explanation Preview 05:30

Photo Grid Shared Element Breakdown Preview 02:01

In this breakdown we'll talk about what we see, and the animation we'll have to recreate using our knowledge of React

Photo Grid Shared Element Preview 30:34

In this tutorial we'll build out a photo grid. When an image is selected we'll craft a shared element transition and animate in additional text content. We'll show issues with Android and how to fix them.

Photo Grid Shared Element Explanation Preview 07:45

Animated Color Picker Breakdown Preview 03:04

In this breakdown we'll step through each stage of our color picker. It's opening and the effects that it shows off, as well as the opening of the input. We'll walk through a frame by frame breakdown.

Animated Color Picker Preview 24:18

In this tutorial we'll build an animated color picker. We'll show how to use the `pointerEvents` technique, as well as how to utilize cliffs to craft an animated effect.

Animated Color Picker Explanation Preview 06:37

Floating Action Button with Menu Breakdown Preview 01:02

In this breakdown we'll look at the Starbucks application that utilizes a floating action button with a hidden menu and scaling circular background cover.

Floating Action Button with Menu Preview 19:06

In this tutorial we'll build out a floating action button. Behind that button we'll add a hidden menu, and also show how to add an expanding and scaling background.

Floating Action Button with Menu Explanation Preview 04:18

Application Intro Screen Breakdown Preview 03:18

In this breakdown we'll look at the concept behind custom animations on a per-screen basis in a `ScrollView`.

Application Intro Screen Preview 20:43

In this tutorial we'll build out a `ScrollView` with various screens. Then walk through how to use Animated with a `ScrollView` to craft custom enter and exit screen animations.

Application Intro Screen Explanation Preview 04:54

Evolving Write Button Breakdown Preview 04:12

In this breakdown we'll go frame by frame on the animation to talk about each piece of the animation we can see and how we can then apply that to rebuilding our animation for ourselves.

Evolving Write Button Preview 24:04

In this tutorial we'll show how to construct an text editing view. We'll then walk through adding a write button, and doing a reversible animation. We'll explore the concept of 2 part animations.

Evolving Write Button Explanation Preview 05:06

Create a Social Comment Modal with Animated Swipe Away Preview 08:33

In this lesson we'll use PanResponder gesture handlers to add the ability to swipe a modal closed. We'll need various ScrollView callbacks to allow us to still scroll through comments and only close when desired. We'll use the Animated library to translate, and fade our modal.

Create a Horizontal Parallax ScrollView Preview 09:57

In this lesson we'll create a Twitter Moments clone with a horizontal parallax image scrolling effect. We'll use Animated.event, and interpolation to make the effect work.

Tap to Show Love Floating Hearts Preview 07:14

In this lesson we'll build a "tap to show love" animation. When the screen is tapped we'll create a heart randomly that will float to the top of the screen and disappear.

Bouncing Heart Shaped Like Button on Press Preview 04:25

In this lesson we'll create a heart shaped like button that bounces when it is pressed. We'll use interpolate and Animated.spring to accomplish the effect.

Exploding Heart Button Preview 06:18

In this lesson we'll create a like button that explodes with hearts. We'll use Animated.stagger, Animated.sequence, Animated.delay, and Animated.parallel to coordinate the animations.

Expanding Notify Input with Success Message Preview 07:07

In this lesson we'll create a notify button that expands from the middle to show a TextInput and a send button. We'll additionally show how to collapse the TextInput when searching is complete and show a thank you message.

End Preview 00:26