In this course we will learn and demonstrate the basic concepts of the React Native Animated API. We'll use Animated calls like `timing` and `spring` to animate style properties, and learn how to combine animations to create more complex effects. We'll learn about more advanced interactions like animations with touch events, interpolation, and flip animations. The ultimate goal is to gain an understanding of how to animate React Native Views, how you can apply them to many different types of styles, and how to enhance the experience in your application.

In this lesson we will use Animated.timing to animate the opacity and height of a View in our React Native application. This function has attributes that you can set such as easing and duration.

Animate Styles of a React Native View with Animated.timing

In this lesson we will use Animated.spring and TouchableWithoutFeedback to animate the scale of a button in our React Native application. We will use the scale transform property and see how adjusting the friction of a spring will effect the spring animation.

Animate the Scale of a React Native Button using Animated.spring

In this lesson we'll create a `PanResponder` to allow us to drag a card around the screen. We'll use `Animated.event` to automatically set the values of our `Animated.Value` and when the card is released we'll use `Animated.decay` to decelerate it to a stop.

Create a Draggable Card with React Native Pan Responder, and Animated.decay

We'll use the interpolate function from an `Animated.Value` to transition the background color of an `Animated.View`. We'll simultaneously translate the position with the same `Animated.Value`.

Animate Colors with React Native Interpolate

By using the `interpolate` function, the  `Animated.View` can be rotated using both degrees and radians.

Animate Rotation with React Native Interpolate

In this lesson we'll use `Animated.sequence` to play multiple `Animated.timing`, and `Animated.spring` animations one after another.

Animate a Sequence of React Native Animations with Animated.sequence

In this lesson we'll use `Animated.stagger` to stagger `Animated.timing` animations that animate the height of a React Native view every 300 milliseconds.

Stagger React Native Animations with Animated.stagger

In this lesson we'll use `Animated.parallel` to animate multiple `Animated.timing` and `Animated.spring` animations at the same time.

Animate Multiple Animations at the Same Time with Animated.parallel

In this lesson we'll learn to use `backfaceVisibility` style property and `rotateX` to create a vertical flip animation, and `rotateY` to create a horizontal flip animation.

Animate React Native UI Elements

Instructor

Course Content