gamma logo

1

Animated List

PreviousNext

A dynamic list component with smooth animations that forms a column and scrolls through items continuously.

Installation

pnpm dlx shadcn@latest add @gammaui/animated-list

Usage

import { AnimatedList } from "@/components/gammaui/animated-list"

Basic Usage

<div className="bg-background relative h-[400px] w-full overflow-hidden rounded-lg border">
  <AnimatedList>
    <div className="bg-card flex w-full max-w-[350px] items-center gap-4 rounded-2xl border p-4 shadow-sm">
      <div className="flex h-10 w-10 items-center justify-center rounded-full bg-cyan-500 text-sm font-medium text-white">
        A
      </div>
      <div className="flex flex-1 flex-col">
        <span className="text-sm font-medium">App</span>
        <span className="text-muted-foreground text-sm">
          Notification message
        </span>
      </div>
    </div>
  </AnimatedList>
</div>

With Custom Configuration

<AnimatedList
  stackGap={20}
  columnGap={85}
  scaleFactor={0.05}
  scrollDownDuration={5}
  formationDuration={1}
>
  {items.map((item) => (
    <div key={item.id}>{item.content}</div>
  ))}
</AnimatedList>

Notification List Example

const notifications = [
  { name: "Location", message: "Thomas has arrived home", time: "2h ago" },
  { name: "Fitness", message: "Daily step goal reached!", time: "1h ago" },
  { name: "Calendar", message: "Team meeting in 30 minutes", time: "45m ago" },
  // ... more notifications
]
 
<div className="relative h-[400px] w-full overflow-hidden rounded-lg border bg-background">
  <AnimatedList
    stackGap={20}
    columnGap={85}
    scaleFactor={0.05}
    scrollDownDuration={5}
    formationDuration={1}
  >
    {notifications.map((notification, index) => (
      <div
        key={index}
        className="flex w-full max-w-[350px] items-center gap-4 rounded-2xl border bg-card p-4 shadow-sm"
      >
        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-cyan-500 text-white text-sm font-medium">
          {notification.name.charAt(0)}
        </div>
        <div className="flex flex-1 flex-col">
          <div className="flex items-center justify-between">
            <span className="text-sm font-medium">{notification.name}</span>
            <span className="text-xs text-muted-foreground">{notification.time}</span>
          </div>
          <span className="text-sm text-muted-foreground">{notification.message}</span>
        </div>
      </div>
    ))}
  </AnimatedList>
</div>

Props

PropTypeDefaultDescription
childrenReactNode-The list items to animate
classNamestring-Additional CSS classes for the container
stackGapnumber20Vertical spacing between stacked items
columnGapnumber85Horizontal spacing between column items
scaleFactornumber0.05Scale difference between stacked items
scrollDownDurationnumber5Duration for scrolling animation (seconds)
formationDurationnumber1Duration for column formation animation (seconds)

Animation Phases

The component goes through four distinct animation phases:

  1. Idle: Items are stacked with scale and opacity effects
  2. Forming Column: Items animate to form a vertical column
  3. Scrolling Down: The entire list scrolls downward
  4. Resetting: Items return to their initial stacked position

Features

  • Continuous Loop: Automatically cycles through all animation phases
  • Smooth Transitions: Uses Framer Motion for fluid animations
  • Customizable Timing: Control formation and scroll durations
  • Responsive Spacing: Adjustable gaps and scaling factors
  • Performance Optimized: Uses AnimatePresence for efficient rendering

Use Cases

  • Notification feeds
  • Activity streams
  • Social media timelines
  • Dashboard widgets
  • News tickers
  • Any continuously updating list content