Animate with Reanimated - 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: https://youtu.be/yz9E10Dq8Bg ... The secret ingredient of this tutorial is the interpolate function. Here's a bunch of helpful tutorials I've made about it: - https://youtu.be/SqwpRr7kbnQ?si=wXxsCX2poNQfS1l3 - https://youtu.be/OT-73hpwxXQ?si=u-dgV8MXW2SZ5OuY Interested in seeing a slightly more complete version? Here it is: https://www.patreon.com/posts/circular-with-88287224 My React Native animations course: https://reanimate.dev Shared 100+ Animations on Demos: https://reactiive.io/demos Twitter: https://twitter.com/reactiive_ Inspiration: https://x.com/_Kavsoft/status/1676300031882846208?s=20 @Kavsoft on Twitter: https://twitter.com/_Kavsoft Check out my website: https://www.reactiive.io Source code: https://github.com/enzomanuelmangano/animate-with-reanimated/tree/main/src/animations/17-circular-carousel 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