Fade InHoverStagger ListLayout ShiftModal BackdropPage TransitionRotateScale UpScroll ParallaxShape MorphingSlide UpText Typing

Staggered List Reveal on Scroll

Framer Motion Animation Preview: Staggered List

  • Learn Framer Motion basics
  • Create reusable animations
  • Use staggered lists on scroll
  • Combine with Tailwind CSS
  • Build interactive UI components

Code Snippet


// components/FM_StaggerList.tsx
import { motion } from "framer-motion";

const listVariant = {
  visible: { transition: { staggerChildren: 0.12 } },
  hidden: {}
};

const itemVariant = {
  hidden: { opacity: 0, y: 12 },
  visible: { opacity: 1, y: 0 }
};

export const FM_StaggerList = ({ items }) => (
  <motion.ul
    initial="hidden"
    whileInView="visible"
    viewport={{ once: true, amount: 0.2 }}
    variants={listVariant}
    className="space-y-2"
  >
    {items.map((t, i) => (
      <motion.li key={i} variants={itemVariant} className="p-3 bg-slate-50 rounded">
        {t}
      </motion.li>
    ))}
  </motion.ul>
);

Explanation

  • listVariant: Controls staggered reveal of child items.
  • itemVariant: Each item fades in and moves up slightly.
  • whileInView: Triggers animation when the list enters the viewport.
  • Great for scroll-based list animations like feature highlights or tasks.