Already Purchased? Sign In

Master React Native Animations

Simple, easy to follow, step-by-step lessons for every type of animation

Full Source Code

All source code of every animation is provided, cloneable, and interactive on Expo. Test every demo on your phone instantly with Expo.

Used By Top Companies

React Native is used by industry leading companies like Facebook, Airbnb, and Uber. You, too, can master the same animated library used every day at these companies.

Guaranteed

I want you to be completely satisfied. If you want more explanation or I'm missing something, I'll make more videos/tutorials. If you aren’t totally happy with your purchase within 30 days, I will happily refund your money entirely.

100% Satisfaction

60+

Instructional Videos

15+

Exclusive Tutorials

60+

Code Samples

Part 1: The Basics (20+ videos)

The basics includes videos and articles on animating all style properties of React Native elements. We also go over each Animated method, how to use them, and how to combine methods to create more complex animations.

Opacity

Control the visibility of a view using the opacity style and Animated.timing

Scale

Control the size of a view using scale transform and Animated.timing.

Translation

Control the position of a view using translate transform and Animated.timing.

Width/Height Values

Control the size and layout of a view using width/height values and Animated.timing.

Absolute Position

Control the position and layout of a view using absolute position and Animated.timing.

Colors

Use interpolation to animate the colors of a view with Animated.timing.

Rotation

Use interpolation to animate the rotation of a view with Animated.timing.

Width/Height Percentage

Use interpolation to animate the width/height percentage of a view with Animated.timing.

And many more...

Part 2: Advanced (20+ videos)

In our advanced work, we dive into complex topics with Animated including interpolation, PanResponder, gestures, and techniques to help construct more complex animations. We’ll also explore how Animated works, rebuild animations, and animate SVGs.

Interpolate Numbers

Interpolating numbers is a crucial piece to crafting animated. We'll cover multiple examples, including interpolating interpolations.

Interpolate Colors

Color changing is another big use case with Animated. We'll cover how to change colors, background colors, and just alpha channels

Interpolate Rotation

Some unique animations require rotations. We'll show how to rotate different axes using rotateX and rotateY with interpolate.

Interpolate Extrapolate

We will cover all uses of interpolate extrapolate. This is just one example of a mixed extrapolateLeft/extrapolateRight that we cover.

.99 Cliffs

Understanding .99 cliffs is essential to understanding how to build immediate animations while maintaining their declarative structure.

Animating Views Hidden

We'll walk using state and the start callback to create pseudo unmounting animations while also handling interrupted animations.

Pointer Events

We'll show case the pointer events technique, to prepare us to use it with real world animations.

Interrupted Animations

We'll demonstrate what an interrupted animation looks like, and how to handle it.

And many more...

Part 3: Real World (20+ videos)

Understanding animations aren’t worth anything unless you can apply them to real world ideas. In this section we start with basic animations and slowly work our way up to complex concepts like “Shared Element Transitions”.

Each video comes with a separate animated breakdown. We will talk through the concepts of each animated piece that builds up to make that animation.

Stagger Form Fields

We'll walk through crafting a staggered animation on mount. This will apply to any immediate animations when views mount.

Dynamic 4 Corners

In this demo we explore dynamic measuring of views to craft specific animations.

Questionnaire

We'll explore coordinating text transitions with a state swap by building an animated questionnaire.

Shared Element Photo Grid

We'll use the concept of shared elements to build a photo grid using dynamic measurements, and our pointer events technique. We'll also show how to make it work on both iOS and Android

Animated Color Picker

We'll explore 2 stage reversible animations to build out an animated color picker

Floating Action Button Menu

A popular trend in Android, we'll explore how to build out a floating action button with a hidden menu, and full screen covering view.

Application Introduction Slider

This demo will show how we can use a ScrollView to build an animated application introduction, with custom enter/exit animations.

Evolving Write Button

We'll show a 2 stage reversible animation, and explore how to build 2 views on top of each other to make it easier to animate between different states.

And many more...

This course is no longer available.

Free soon!

This course was the first course I ever released. It was a great experience but it is time to open source it for free! After revisions this course will be free for everyone.

Thank you to all supporters and purchasers for making my first course a success. Look forward to building more!

Who Am I

My name is Jason Brown or browniefed to most everyone online. I've been using React Native since its public release from React Conf (yeah I got my hands on the super secret zip file). In the beginning animations eluded me. I would see animations in applications on native/web and be envious of those that understood how to do that.

That's when I decided to start practicing. I deliberately started rebuilding simple animations piece by piece and blogging about it. I started getting a grasp on how to break down each animation into its separate animations. With a bit of knowledge of Animated and React I soon became very good at piecing together the exact animations. I've made a lot of mistakes along the way, but have learned from them. I've condensed all my knowledge of React Native Animated into this course.

I hope this course will help you fully realize that animations are not out of reach. You, too, can understand how to analyze an animation, break it down, and rebuild it using Animated in React Native.

FAQ

  • How do I access the content?

    Login or create an account on Code Daily and select "My Courses".

  • I lost access to the content. Help!

    Don't worry, send me an email at [email protected] with your receipt, or email you used to sign up and we'll fix it.

  • What's the quality of the videos? Can I download them?

    All videos are streamed in high definition. We record at a resolution of 1280x720 (HDPI). This means that regardless of whether you are watching the videos on a computer, 65 inch TV, or projector the code will be easily readable. You can download them DRM free, and watch them on any device.

  • What if I'm not happy?

    I offer a 30-day money back guarantee. I want you to be 100% satisfied with your purchase. All feedback is welcome on what would have made your experience better.

  • What if I can't afford it/I'm a student?

    I don't want you to miss out just because salaries in your country are lower than the US, or you are a student. If that is the case, shoot me an email [email protected] and I'll give you a discounted course.

  • I have more questions!

    I'll try and answer anything you send at me. Just shoot me an email at [email protected]