Animated List

A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.

💸
Payment received·15m ago

HiUI

Installation

Copy and paste the following code into your project.

"use client"
 
import React, { ReactElement, useEffect, useMemo, useState } from "react"
import { AnimatePresence, motion } from "framer-motion"
 
export interface AnimatedListProps {
  className?: string
  children: React.ReactNode
  delay?: number
}
 
export const AnimatedList = React.memo(
  ({ className, children, delay = 1000 }: AnimatedListProps) => {
    const [index, setIndex] = useState(0)
    const childrenArray = React.Children.toArray(children)
 
    useEffect(() => {
      const interval = setInterval(() => {
        setIndex((prevIndex) => (prevIndex + 1) % childrenArray.length)
      }, delay)
 
      return () => clearInterval(interval)
    }, [childrenArray.length, delay])
 
    const itemsToShow = useMemo(
      () => childrenArray.slice(0, index + 1).reverse(),
      [index, childrenArray]
    )
 
    return (
      <div className={`flex flex-col items-center gap-4 ${className}`}>
        <AnimatePresence>
          {itemsToShow.map((item) => (
            <AnimatedListItem key={(item as ReactElement).key}>
              {item}
            </AnimatedListItem>
          ))}
        </AnimatePresence>
      </div>
    )
  }
)
 
AnimatedList.displayName = "AnimatedList"
 
export function AnimatedListItem({ children }: { children: React.ReactNode }) {
  const animations = {
    initial: { scale: 0, opacity: 0 },
    animate: { scale: 1, opacity: 1, originY: 0 },
    exit: { scale: 0, opacity: 0 },
    transition: { type: "spring", stiffness: 350, damping: 40 },
  }
 
  return (
    <motion.div {...animations} layout className="mx-auto w-full">
      {children}
    </motion.div>
  )
}

Update the import paths to match your project setup.

Props

Animated List

PropTypeDescriptionDefault
classNamestringThe class name for the component""
delaynumberThe delay between each item in ms1000