Animated 3D Card in React Native (Reanimated and Skia)

In this tutorial we’ll learn how to create an Animated 3D Card Animation in React Native.
We're going to use Reanimated, React Native Gesture Handler and React Native Skia.

My React Native animations course: https://www.reanimate.dev

The animation is fully inspired by Philip Davis' Twitter profile: Twitter: 1509200015587041281

Learn more about React Native: https://www.reactiive.io

Join me on Patreon: Patreon: reactiive 🤓
Follow me on Twitter: Twitter: reactiive_

What is React Native Skia? https://shopify.github.io/react-nativ...

Useful videos:
1. What is Reanimated: Introduction to React Native Reanimat...
2. Perspective Animation: Perspective Menu Animation in React N...
3. Reanimated Interpolation: React Native Advanced Onboarding (Rea...

Don't forget to leave a star on GitHub! ⭐️
Source code: https://github.com/enzomanuelmangano/...

Chapters:
00:00 Introduction
01:00 Skia Gradient
09:36 The 3D Transform
16:56 Tracking the corners
18:16 Card gesture animation
26:38 Smoothing the animation
28:35 Adding the UI placeholders
31:36 Skia animated gradient

• #education
• #react_native
• #reanimated
• #animations
• #react_native_animations
• #app_development
• #gestures