Animated List

Renders a list with animated items that form a column and scroll down. Items scale and move based on their position and animation phase. Use for visual transitions in dynamic content displays.

byMudunuri bhaskara karthikeya varma from Eldoraui

Installation

terminal

pnpm dlx layro-cli add @karthikmudunuri/animated-list

npx layro-cli add @karthikmudunuri/animated-list

npx layro-cli add @karthikmudunuri/animated-list

bunx layro-cli add @karthikmudunuri/animated-list

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import React, { useEffect, useMemo, useState } from "react"
import { AnimatePresence, motion, useAnimationControls } from "motion/react"

import { cn } from "@/lib/utils"

type AnimationPhase = "idle" | "forming_column" | "scrolling_down" | "resetting"

type AnimatedListProps = {
  children: React.ReactNode
  className?: string
  stackGap?: number
  columnGap?: number