Container Scroll Animation
Scroll-linked animation that transforms a container as the user scrolls through it.
Preview
Container Scroll Animation
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Product feature reveals and progressive disclosure sections.
Why this component matters
Scroll-linked animation gives the user control over pacing — they reveal content at their own speed.
Usage guidance
Use for hero-to-content transitions. The container should transform from a headline into a detailed view as the user scrolls.
Installation
bash
npx shadcn@latest add @aceternity/container-scroll-animationUsage
example.tsxtsx
import { ContainerScrollAnimation } from "@/components/ui/container-scroll-animation";
export default function Example() {
return (
<ContainerScrollAnimation>
{/* Your content here */}
</ContainerScrollAnimation>
);
}Source
container-scroll-animation.tsx
components/ui/container-scroll-animation.tsx