Course
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!
💪 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!
💫 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.
Animating Styles with SharedValues
In this video, we'll learn how to use Reanimated's SharedValues to animate styles in React Native.
Using an Animation Function
Now we animate the change of our sharedValues using an animation function.
🪐 Reanimated Advanced
Enter/Exit Animations
Let's learn how we can animate the enter and exit of our components.
Shared Element Transitions
The holy grail of animations are shared element transitions - but with Reanimated it becomes super easy to implement.
Custom Worklets & Threads
We explore how to customize the SET and also see a worklet with threads in action.
🔥 Real World Examples
Fade in on Scroll
We can tap into the scroll events and use them to fade in elements depending on the scrollview offset.
Animated Bottom Sheet
We wrap up the course by putting everything we've learned together to create an animated bottom sheet.