Animated List

A list that animates additions, removals, and reordering with smooth transitions. It displays items in a specified direction and can automatically feed new items. Use it to show dynamic content with visual feedback.

byEdu Calvo from Smoothui

Installation

terminal

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

npx layro-cli add @educlopez/animated-list

npx layro-cli add @educlopez/animated-list

bunx layro-cli add @educlopez/animated-list

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

Code

Dependencies

Demo

"use client";

import SmoothButton from "@/components/smoothui/smooth-button";
import { cn } from "@/lib/utils";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import type { ReactNode } from "react";
import { useEffect, useState } from "react";

const DEFAULT_MAX_VISIBLE = 5;
const DEFAULT_STAGGER = 0.05;
const DEFAULT_FEED_INTERVAL = 2000;
const MAX_STAGGER_DELAY = 0.3;
const RECEDE_OPACITY_STEP = 0.18;
const RECEDE_SCALE_STEP = 0.05;