Course's logo Course
pro
Animations with Reanimated
12 videos 1 hrs 14 mins 04 August 2023

Course Decription

Step into the vibrant world of React Native animations with our comprehensive course, “Animations with Reanimated.” Learn how to craft fluid, engaging animations using the powerful capabilities of Reanimated 3, ensuring your app isn’t just functional but also visually captivating.

What will I learn?

  • ✌️ Get introduced to Reanimated 3, understanding its features and advantages for mobile app animations.
  • 💪 Master the basics, from sharedValues to animation functions, laying a strong foundation.
  • 💫 Explore the magic of layout animations, learning to animate component entry/exits and create shared element transitions between pages.
  • 🔥 Implement real-world examples like staggered lists and interactive bottom sheets, bringing together everything you’ve learned.
  • ⚡️ Add depth, interactivity, and visual flair to your app, enhancing user engagement.

Breathe life into your mobile apps. Enroll in “Animations with Reanimated” now and transform your applications from static to stunningly animated masterpieces!

start course start course

💪 Getting Started

Course Introduction

What are we building in this course, and what will you learn? Let's take a quick look at the course and all objectives!

2 min
view

About Reanimated

Let's explore Reanimated and how it works.

2 min
view

💫 Reanimated Basics

Setting up Reanimated with Expo

We will be using Expo to create our app, so let's get started by installing React Navigation and Reanimated.

8 min
view

Animating Styles with SharedValues

In this video, we'll learn how to use Reanimated's SharedValues to animate styles in React Native.

5 min
view

Using an Animation Function

Now we animate the change of our sharedValues using an animation function.

6 min
view

Animated Components

Learn how to use Reanimated to create custom animated components.

4 min
view

🪐 Reanimated Advanced

Enter/Exit Animations

Let's learn how we can animate the enter and exit of our components.

9 min
view

Shared Element Transitions

The holy grail of animations are shared element transitions - but with Reanimated it becomes super easy to implement.

3 min
view

Custom Worklets & Threads

We explore how to customize the SET and also see a worklet with threads in action.

8 min
view

🔥 Real World Examples

Staggered List

Learn how to create a staggered list of items and layout animations.

9 min
view

Fade in on Scroll

We can tap into the scroll events and use them to fade in elements depending on the scrollview offset.

6 min
view

Animated Bottom Sheet

We wrap up the course by putting everything we've learned together to create an animated bottom sheet.

12 min
view