CF

Animations with Reanimated

1h 14m 21s
English
Paid

Immerse yourself in the vibrant world of React Native animations with our comprehensive course, “Animations with Reanimated.” Discover how to craft fluid and engaging animations using the advanced capabilities of Reanimated 3, ensuring your app is not only functional but also visually captivating.

Course Overview

This course is designed to guide you through the ins and outs of creating sophisticated animations in React Native. Whether you're a beginner or an experienced developer, this course offers valuable insights and hands-on exercises to elevate your animation skills.

Key Learning Outcomes

  • Introduction to Reanimated 3: Understand the features and advantages of using Reanimated 3 for mobile app animations.
  • Master the Basics: Learn the fundamentals such as sharedValues and animation functions to build a strong foundation in animation creation.
  • Magic of Layout Animations: Explore layout animations, including how to animate component entry/exits and create shared element transitions between pages.
  • Real-world Examples: Implement practical examples like staggered lists and interactive bottom sheets to integrate all that you've learned.
  • Enhance User Experience: Add depth, interactivity, and visual flair to your app, boosting user engagement significantly.

About the Author: Simon Grimm

Simon Grimm thumbnail

Simon Grimm is a German developer and educator behind the Galaxies.dev teaching platform, focused entirely on cross-platform mobile development with Ionic, Capacitor, React Native, and Flutter. He is one of the longest-running independent instructors on the Ionic / Capacitor stack and a frequent speaker at the framework's official events.

His CourseFlix listing carries over twenty Galaxies.dev courses covering Ionic Angular, Ionic React, Capacitor native plugin development, React Native, and Flutter — plus the surrounding ecosystem (auth, push notifications, in-app purchases, Stripe integration). Material is paid and aimed at developers building production mobile apps with web technologies rather than going down the native Swift / Kotlin track.

Watch Online 12 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 12 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Course Introduction
All Course Lessons (12)
#Lesson TitleDurationAccess
1
Course Introduction Demo
02:22
2
About Reanimated
02:36
3
Setting up Reanimated with Expo
07:42
4
Animating Styles with SharedValues
05:06
5
Using an Animation Function
06:09
6
Animated Components
04:11
7
Enter/Exit Animations
08:53
8
Shared Element Transitions
03:20
9
Custom Worklets & Threads
07:31
10
Staggered List
09:05
11
Fade in on Scroll
06:01
12
Animated Bottom Sheet
11:25
Unlock unlimited learning

Get instant access to all 11 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

Frequently asked questions

What prerequisites should I have before taking this course?
Before enrolling in this course, you should have a basic understanding of React Native, as the course builds on that knowledge to teach advanced animation techniques using Reanimated 3. Familiarity with JavaScript and foundational programming concepts will also be beneficial for grasping the material effectively.
What projects or examples will I work on during this course?
Throughout the course, you will implement real-world examples such as staggered lists and interactive bottom sheets. These projects will help you apply the concepts learned in the lessons, like shared element transitions and layout animations, to create engaging and interactive animations in your React Native applications.
Who is the target audience for this course?
This course is ideal for developers who have experience with React Native and are looking to enhance their skills in creating animations. Whether you are a beginner wanting to learn about animations or an experienced developer seeking to refine your animation techniques, this course offers valuable insights and practical exercises.
How does this course compare to other animation courses?
Unlike other animation courses that may offer a broad overview, this course focuses specifically on React Native animations using Reanimated 3. It covers unique topics such as sharedValues, animation functions, and custom worklets, providing a specialized and practical approach to mastering mobile app animations.
Which specific tools and platforms are covered in this course?
The course covers Reanimated 3 and its integration with Expo, a popular platform for building React Native apps. You will learn to use Reanimated's features like sharedValues and animation functions, and explore animated components and custom worklets to enhance your app's animations.
What topics are not covered in this course?
The course does not cover basic React Native setup and development, as it assumes a foundational knowledge in those areas. It also does not delve into non-animation aspects of app development, focusing solely on creating and mastering animations using Reanimated 3.
How much time will I need to commit to complete this course?
The course consists of 12 lessons, each varying in length and complexity. While the total runtime isn't specified, you should plan to dedicate additional time for hands-on exercises and implementing real-world examples to fully grasp the concepts and techniques covered in the lessons.