Skip to content
Native Animation
Vertical Title Cards animation preview
CarouselCardsShared transitionGestureParallax

Vertical Title Cards

A portrait-card carousel that turns a vertical editorial title into a full detail header with a measured shared transition.

$9 for this animation

Checkout opens soon. Leave your email and we will tell you the moment you can buy it.

One email when checkout opens. No spam.

Add to your project

Copy the component and its assets into your app with the Native Animation CLI, or paste the agent prompt into Claude Code, Codex or Cursor once the MCP server is connected.

npx nativeanimation add vertical-title-cards

About this animation

A portrait-card carousel that turns a vertical editorial title into a full detail header with a measured shared transition.

Why this one

The opening frame is measured on the UI thread, so the image grows from its real on-screen position without a shared-element library. The title rotates from vertical to horizontal, the image uses scroll-linked parallax, and a downward drag reverses the same transition back to the card under your finger.

How it works

  1. Every card keeps an animated ref and measures itself relative to the component when opened.
  2. One continuous position value drives horizontal placement, depth, and image parallax.
  3. A shared open-progress value interpolates the measured card frame into the detail header.
  4. The title rotates into its horizontal detail position while the information panel rises into view.
  5. Dragging the detail downward directly rewinds open progress; release velocity decides whether it closes or returns.
  6. Reduced Motion replaces spatial interpolation and parallax with short fades.

Install

npx expo install expo-image expo-linear-gradient react-native-gesture-handler react-native-reanimated react-native-worklets

Usage

import { VerticalTitleCards } from './VerticalTitleCards';

<VerticalTitleCards cards={cards} />;

With external controls and custom personality:

const cardsRef = useRef<VerticalTitleCardsRef>(null);

<VerticalTitleCards
  ref={cardsRef}
  cards={cards}
  accentColor="#FFD43B"
  fontFamily="Geist-Regular"
  titleFontFamily="Geist-Medium"
  onOpen={(index) => trackOpen(index)}
  onClose={() => trackClose()}
/>

Call cardsRef.current?.open(2) to center and open a card, or cardsRef.current?.close() to return it to the carousel.

Props

NameTypeDefaultDescription
cardsTitleCard[]RequiredPortrait images, titles, and detail rows.
accentColorstring'#FFD43B'Highlight, rail, glow, and control-border color.
fontFamilystringSystemLabels, values, and controls.
titleFontFamilystringSystemLarge vertical and horizontal titles.
onOpen(index: number) => void—Fires when a card starts opening.
onClose() => void—Fires after the detail view closes.
styleStyleProp<ViewStyle>—Outer-container style override.
testIDstring—Test identifier for the outer container.

TitleCard is { image: ImageSourcePropType; title: string; details: { label: string; value: string }[] }.

Compatibility

  • Expo SDK 57
  • React Native 0.86
  • Reanimated 4.5 and Worklets 0.10
  • iOS: unverified on device
  • Android: unverified on device
  • Web: verified by export and bundle
  • Works in Expo Go with the SDK-bundled native modules

Accessibility

Cards and controls expose button roles and descriptive labels. The carousel supports adjustable increment and decrement actions, and the close button provides a touch alternative to the downward-dismiss gesture. With Reduce Motion enabled, parallax, title rotation, and frame travel are replaced by short fades.

More animations