Browse components
Animated Content
Slides, scales and fades its children into place when they scroll into view.
Installation
npx shadcn@latest add @glint-ui/animated-contentFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/animated-content.json
Usage
import { AnimatedContent } from "@/components/ui/animated-content";
<AnimatedContent direction="up" distance={80} ease="spring">
<Card />
</AnimatedContent>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Content to reveal. |
| direction | "up" | "down" | "left" | "right" | "up" | Direction the content travels as it enters. |
| distance | number | 80 | Px travelled on entry. |
| scale | number | 0.96 | Starting scale; 1 disables scaling. |
| initialOpacity | number | 0 | Starting opacity. |
| duration | number | 900 | Duration in ms. |
| delay | number | 0 | Ms to wait once in view. |
| ease | "smooth" | "spring" | "snappy" | "linear" | "smooth" | Easing preset, or pass any CSS timing function. |
| threshold | number | 0.15 | Fraction of the element visible before it animates. |
| once | boolean | true | Animate only the first time it enters view. |
| scrollContainerRef | ReactNode | — | Ref to a scrolling ancestor. Defaults to the viewport. |
| className | string | — | Extra classes for the root element. |