reanimate.dev

8h 35m 52s
English
Paid

Course description

Discover the beauty of animations in React Native. Dive into the world of animations with this course, which will help you master both basic and advanced techniques.

Read more about the course

Workshops

  1. Animated Square: To build a castle, it's important to start with the foundation. In this lesson, we will identify the basic building blocks for creating animations together.
  2. Exploring Pan Gestures: It’s amazing what can be achieved with simple gestures. In this video, we will learn how to coordinate gestures with Shared Values.
  3. Tap Gestures: Tapping on objects is always fun, but what if we could animate them when tapped? In this lesson, we will explore the possibilities of tap gestures and how to respond to them.
  4. Parallax Animation: The parallax effect is a classic in the world of animations. Have you ever wondered how to create it? This is what this lesson is about.
  5. Animated Text: Text animation can easily enhance the user experience of your app. In this lesson, we will learn how to do it, fully relying on the UI Thread.
  6. Scrolling Text Animation: Learning the basic building blocks of animation is fun. Combining them together is satisfying. In this lesson, we will learn how to animate text while scrolling by combining text and scroll animations.
  7. Shared Transitions: Let’s be honest, shared transitions are the coolest thing ever. In this lesson, we will see how to use them to experience the future of animations in React Native.
  8. Layout Animations: No matter what the question is, layout animations will always be the answer. In this lesson, we will uncover all the secrets of layout animations.
  9. Family Phone Number Input: The Family app is a pure demonstration of how animations can change the user experience. In this lesson, we will learn how to recreate a simplified version of their phone number input.
  10. The Beauty of Skia: Skia is the spice that makes the dish tastier. In this lesson, we will learn the basics of Skia and how to use it to enhance our animations.
  11. Animated Chart: Charts are the best way to visualize data. In this lesson, we will learn how to create a chart inspired by Steddy using Skia.
  12. Canvas Gestures: Using the canvas is always fun, but how do you interact with the elements? This lesson will give you the answers.
  13. Bottom Tab Animation: It’s time to integrate animations into your navigation system. In this lesson, we will learn how to create a customizable BottomTabBar and attach it to what is used in Expo Router.
  14. Shader Image Transitions: When an animation impresses you, chances are you've seen a shader. In this lesson, we will learn how to create a shader transition between images.
  15. Shader Navigation: Shaders are the best way to create stunning transitions. In this lesson, we will learn how to use shaders for navigating between screens using Skia.

Watch Online

This is a demo lesson (10:00 remaining)

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

View Pricing

Watch Online reanimate.dev

0:00
/
#1: 001 Welcome to Reanimate.dev

All Course Lessons (16)

#Lesson TitleDurationAccess
1
001 Welcome to Reanimate.dev Demo
06:16
2
002 Bouncing Square
14:02
3
003 Pan Gesture Handler
19:43
4
004 Spatial Tap Gesture
18:00
5
005 Parallax Animation
31:28
6
006 Animated Text
32:07
7
007 Animated Scrollable Percentage
48:29
8
008 Layout Animations
31:58
9
009 Family Number Input
44:01
10
010 Shared Transitions
52:02
11
011 Skia Magical Button
35:44
12
012 Skia Animated Path
35:01
13
013 Skia Pan Gesture (Again)
25:06
14
014 Bottom Tab Animation
42:07
15
015 Image Shader Transitions
40:11
16
016 Navigating with Shaders
39:37

Unlock unlimited learning

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

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

State Management with Zustand

State Management with Zustand

Sources: Simon Grimm
Enter the world of efficient and intuitive state management with our in-depth course, “React Native State Management with Zustand.” Learn how to effortlessly...
56 minutes 13 seconds
React Native Course

React Native Course

Sources: Beto Moedano
Enhance your mobile app development skills with the updated course based on Expo SDK 52. You will master the new architecture of React Native, modern...
13 hours 11 minutes 22 seconds
AnimateReactNative.com - Premium and Custom React Native animations

AnimateReactNative.com - Premium and Custom React Native animations

Sources: Catalin Miron
Why spend hours reinventing the wheel when you can leverage our extensive collection of animation components? Whether you're looking for eye-catching effects...
The Full Stack Mobile Developer

The Full Stack Mobile Developer

Sources: Vadim Savin (notjust.dev)
Join the Full Stack Mobile Developer course and learn the full lifecycle of developing mobile applications. Master both frontend and backend skills by building
34 hours 29 minutes 50 seconds
React Native Expo Boilerplate | Ship Mobile Fast

React Native Expo Boilerplate | Ship Mobile Fast

Sources: shipmobilefast
Ship Mobile Fast is a template for developing mobile applications based on React Native and Expo, providing ready-to-use features such as...