saturation/ui
DocsComponentsBlocksPages

Sections

IntroductionComponentsInstallationTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNovel EditorPaginationProgressProgressive BlurRadio GroupSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Animated Group

Animated Group

Animates a group of elements with staggered entry/exit.

Loading...

Installation

pnpm dlx shadcn@latest add @saturation/animated-group

Usage

import { AnimatedGroup } from "@/components/ui/animated-group"
<AnimatedGroup preset="fade">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</AnimatedGroup>

Examples

Slide

Loading...
Slide up animation.

Blur Slide

Loading...
Blur and slide entrance.

Scale

Loading...
Scale up animation.

Zoom

Loading...
Zoom with spring physics.

Project Cards

Loading...
Staggered card grid.

Custom Variants

Loading...
Custom animation variants.

Hover

Loading...
Animate on hover.

API Reference

PropTypeDefaultDescription
preset"fade" | "blur" | "slide" | "scale"—Animation preset.
staggernumber0.1Stagger delay between items.

On This Page

  • Installation
  • Usage
  • Examples
  • Slide
  • Blur Slide
  • Scale
  • Zoom
  • Project Cards
  • Custom Variants
  • Hover
  • API Reference
1
2
3
4
A
B
C
D
First item fades in with blur
Second item follows with stagger
Third item appears after a delay
Final item completes the sequence
Fast
Secure
Global
Launch
Active

Dashboard

In Progress

Analytics

Active

API Gateway

Review

Auth Service

In Progress

Mobile App

Active

Design System

01
02
03
04

Hover to replay animation

H
O
V
E
R