animated-list

1"use client"
2 
3import React, { useEffect, useMemo, useState } from "react"
4import { AnimatePresence, motion, useAnimationControls } from "motion/react"
5 
6import { cn } from "@/lib/utils"
7 
8type AnimationPhase = "idle" | "forming_column" | "scrolling_down" | "resetting"
9 
10type AnimatedListProps = {
11  children: React.ReactNode
12  className?: string
13  stackGap?: number
14  columnGap?: number
15  scaleFactor?: number
16  scrollDownDuration?: number
17  formationDuration?: number
18}
19 
20type AnimatedListItemProps = {
21  children: React.ReactNode
22  className?: string
23  index: number
24  listLength: number
25  stackGap?: number
26  columnGap?: number
27  scaleFactor?: number
28}
29 
30function InternalAnimatedListItem({
31  children,
32  className,
33  index,
34  listLength,
35  animationPhase,
36  onFormationComplete,
37  stackGap = 10,
38  columnGap = 100,
39  scaleFactor = 0.1,
40  formationDuration = 1,
41  visibleItemsCount = 4,
42  resetSpringStiffness = 120,
43  resetSpringDamping = 20,
44}: AnimatedListItemProps & {
45  animationPhase: AnimationPhase
46  onFormationComplete?: () => void
47  formationDuration: number
48  visibleItemsCount: number
49  resetSpringStiffness: number
50  resetSpringDamping: number
51}) {
52  const reverseIndex = listLength - 1 - index
53  const isVisible = reverseIndex < visibleItemsCount
54  const lastItemOffset = (listLength - 1) * columnGap
55  const isLastItem = index === listLength - 1
56 
57  const itemVariants = {
58    initial: {
59      scale: 1 + index * scaleFactor,
60      y: reverseIndex * stackGap,
61      opacity: isVisible ? 1 : 0,
62    },
63    column: {
64      scale: 1,
65      y: index * columnGap - lastItemOffset,
66      opacity: 1,
67    },
68  }
69 
70  const target =
71    animationPhase === "idle" || animationPhase === "resetting"
72      ? "initial"
73      : "column"
74 
75  const getTransition = () => {
76    if (animationPhase === "resetting") {
77      return {
78        type: "spring" as const,
79        stiffness: resetSpringStiffness,
80        damping: resetSpringDamping,
81      }
82    } else {
83      return { duration: formationDuration, ease: [0.4, 0, 0.2, 1] as const }
84    }
85  }
86 
87  const handleAnimationComplete = (definition: string) => {
88    if (
89      isLastItem &&
90      definition === "column" &&
91      animationPhase === "forming_column"
92    ) {
93      onFormationComplete?.()
94    }
95  }
96 
97  return (
98    <motion.div
99      key={index}
100      className={cn("absolute inset-x-0 flex w-full justify-center", className)}
101      variants={itemVariants}
102      initial="initial"
103      animate={target}
104      transition={getTransition()}
105// … truncated