Apple Invites animated onboarding

Description

Recreated the Apple Invites animated onboarding experience using React Native Reanimated and open source [@animatereactnative/marquee](https://github.com/animate-react-native/marquee) component to create the looping animated carousel. ✨ Features - ✅ Looping Marquee Effect – Seamlessly scrolls images in alternating directions. - ✅ Pan Gesture Support – Users can manually interact with the marquee. - ✅ Smooth Enter/Exit Animations – Powered by React Native Reanimated for a fluid experience. - ✅ Animated blurred image in the background, based on the active carousel item index.

Installation

bunx @animatereactnative/cli@latest add apple-invites-animated-onboarding

npx @animatereactnative/cli@latest add apple-invites-animated-onboarding

yarn @animatereactnative/cli@latest add apple-invites-animated-onboarding

pnpm dlx @animatereactnative/cli@latest add apple-invites-animated-onboarding

Preview

Dependencies

PackageVersion
@animatereactnative/marquee^0.5.2
@animatereactnative/stagger^0.3.0
react-native-reanimated~4.1.0

To install these dependencies, you can use the following command:

bun add @animatereactnative/marquee@"^0.5.2" @animatereactnative/stagger@"^0.3.0" react-native-reanimated@"~4.1.0"

npm install @animatereactnative/marquee@"^0.5.2" @animatereactnative/stagger@"^0.3.0" react-native-reanimated@"~4.1.0"

yarn install @animatereactnative/marquee@"^0.5.2" @animatereactnative/stagger@"^0.3.0" react-native-reanimated@"~4.1.0"

pnpm install @animatereactnative/marquee@"^0.5.2" @animatereactnative/stagger@"^0.3.0" react-native-reanimated@"~4.1.0"

Source code