React Native Advanced Onboarding (Reanimated 2)
In this tutorial, we’ll learn how to create an outstanding Skateboard Deck Onboarding. In order to build the animation we'll just use the Reanimated v2 package.
My React Native animations course: https://reanimate.dev
Shared 100+ Animations on Demos: https://reactiive.io/demos
Twitter: / reactiive_
Source code: https://github.com/enzomanuelmangano/...
Inspirations:
Dribbble: https://dribbble.com/shots/5350361-Sk...
Flutter SpeedCode Onboarding: • Flutter Skateboard Deck Onboarding - Speed...
Devefy Channel: / @devefy
This video is a little bit more advanced, so if it's your first time with Reanimated I highly recommend you to check my series "Animated with Reanimated"
• Introduction to React Native Reanimated 2
About Interpolation 🐢
1. Interpolate with ScrollView: • Interpolate with ScrollView like a pro (Re...
2. Interpolate Colors (Theme Animation): • Interpolate Colors like a pro with React N...
3. ColorPicker with InterpolateColor: • Color Picker Animation with React Native R...
Chapters:
00:00 Demo
01:25 Introduction
02:21 ScrollView & Pages UI
12:25 Switch to an Animated.ScrollView
16:40 Circle Scale Animation + interpolate
22:03 Skate Image Animation
26:03 Footer UI
30:20 Paginator
36:56 Scroll onIconPress