Vertical carousel animation - Reanimated
Description
The **Vertical carousel animation** component leverages **React Native Reanimated** to create a scrollable list where items scale, fade, and slide into view based on their position.
### Components
- **Item Component**: Each carousel item animates using `interpolate` to adjust **opacity** and **scale** based on scroll position. `FadeInDown` is applied for entry, adding a smooth drop effect.
- **Title Component**: Item titles animate with `translateY` and `scale` as they enter the viewport, creating a parallax-style effect.
- **PaginationIndicator**: Right-side indicators reflect the current scroll position, dynamically adjusting **opacity** and **scale**.
Installation
bunx @animatereactnative/cli@latest add vertical-carousel-animation-reanimated
npx @animatereactnative/cli@latest add vertical-carousel-animation-reanimated
yarn @animatereactnative/cli@latest add vertical-carousel-animation-reanimated
pnpm dlx @animatereactnative/cli@latest add vertical-carousel-animation-reanimated
Dependencies
| Package | Version |
|---|---|
moti | ^0.29.0 |
To install these dependencies, you can use the following command:
bun add moti@"^0.29.0"
npm install moti@"^0.29.0"
yarn install moti@"^0.29.0"
pnpm install moti@"^0.29.0"