Stagger List
A blog list with staggered fade-in animations for each item.
Stagger List
A list component where each item fades in sequentially with a staggered delay, creating a cascading reveal effect.
Animation Process
Each list item gets a progressively longer transition-delay, creating the stagger effect. The animation is triggered by adding a class when items enter the viewport.
"use client";
import { useEffect, useRef } from "react";
const items = ["Item 1", "Item 2", "Item 3", "Item 4"];
export function StaggerList() {
const ref = useRef<HTMLUListElement>(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
el.classList.add("stagger-visible");
observer.unobserve(el);
}
},
{ threshold: 0.1 }
);
observer.observe(el);
return () => observer.disconnect();
}, []);
return (
<ul ref={ref}>
{items.map((item, i) => (
<li
key={item}
style={{ transitionDelay: `${i * 150}ms` }}
className="opacity-0 translate-y-4 transition-all duration-500"
>
{item}
</li>
))}
</ul>
);
}Key steps:
- Each item starts invisible and offset
transition-delayis calculated from the index (i * 150ms)- When the parent enters the viewport, all items animate in sequence
Source Code
View the full implementation on GitHub.