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

Preview

Dependencies

PackageVersion
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"

Source code