Circular Carousel Animation in React Native (Reanimated)
In this tutorial, we will create a simple and beautiful circular carousel animation from scratch. We're going to do that by using just Reanimated 🙌
If you're not familiar with Reanimated I made a full YouTube series on it.
You can start here: • Introduction to React Native Reanimat...
My React Native animations course: https://www.reanimate.dev
... The secret ingredient of this tutorial is the interpolate function. Here's a bunch of helpful tutorials I've made about it:
• Interpolate with ScrollView like a pr...
• React Native Advanced Onboarding (Rea...
Interested in seeing a slightly more complete version?
Here it is: / circular-with-88287224
Do you love Reanimated animations?
Support me on Patreon: / reactiive
Twitter: / reactiive_
Inspiration: https://x.com/_Kavsoft/status/1676300...
@Kavsoft on Twitter: / _kavsoft
Check out my website: https://www.reactiive.io
Source code: https://github.com/enzomanuelmangano/...
Chapters:
00:00 Introduction
01:00 Setup the boilerplate
11:17 Let's retrieve the horizontal scroll offset
14:20 The interpolate function
22:05 Understanding Extrapolate.CLAMP
23:50 Let's improve the interpolation
26:40 Animate the opacity
28:30 Animate the scale
29:30 Final touches