Animated Group

1"use client";
2 
3import React, { type ComponentPropsWithRef } from "react";
4import { motion, type Variants } from "motion/react";
5 
6export type PresetType =
7	| "fade"
8	| "slide"
9	| "scale"
10	| "blur"
11	| "blur-slide"
12	| "zoom"
13	| "flip"
14	| "bounce"
15	| "rotate"
16	| "swing";
17 
18export type AnimatedGroupProps = {
19	className?: string;
20	variants?: {
21		container?: Variants;
22		item?: Variants;
23	};
24	preset?: PresetType;
25	as?: React.ElementType;
26	asChild?: React.ElementType;
27} & ComponentPropsWithRef<"div">;
28 
29const defaultContainerVariants: Variants = {
30	visible: {
31		transition: {
32			staggerChildren: 0.1,
33		},
34	},
35};
36 
37const defaultItemVariants: Variants = {
38	hidden: { opacity: 0 },
39	visible: { opacity: 1 },
40};
41 
42const presetVariants: Record<PresetType, Variants> = {
43	fade: {},
44	slide: {
45		hidden: { y: 20 },
46		visible: { y: 0 },
47	},
48	scale: {
49		hidden: { scale: 0.8 },
50		visible: { scale: 1 },
51	},
52	blur: {
53		hidden: { filter: "blur(4px)" },
54		visible: { filter: "blur(0px)" },
55	},
56	"blur-slide": {
57		hidden: { filter: "blur(4px)", y: 20 },
58		visible: { filter: "blur(0px)", y: 0 },
59	},
60	zoom: {
61		hidden: { scale: 0.5 },
62		visible: {
63			scale: 1,
64			transition: { type: "spring", stiffness: 300, damping: 20 },
65		},
66	},
67	flip: {
68		hidden: { rotateX: -90 },
69		visible: {
70			rotateX: 0,
71			transition: { type: "spring", stiffness: 300, damping: 20 },
72		},
73	},
74	bounce: {
75		hidden: { y: -50 },
76		visible: {
77			y: 0,
78			transition: { type: "spring", stiffness: 400, damping: 10 },
79		},
80	},
81	rotate: {
82		hidden: { rotate: -180 },
83		visible: {
84			rotate: 0,
85			transition: { type: "spring", stiffness: 200, damping: 15 },
86		},
87	},
88	swing: {
89		hidden: { rotate: -10 },
90		visible: {
91			rotate: 0,
92			transition: { type: "spring", stiffness: 300, damping: 8 },
93		},
94	},
95};
96 
97const addDefaultVariants = (variants: Variants) => ({
98	hidden: { ...defaultItemVariants.hidden, ...variants.hidden },
99	visible: { ...defaultItemVariants.visible, ...variants.visible },
100});
101 
102function AnimatedGroup({
103	children,
104	className,
105	variants,
106	preset,
107	as = "div",
108	asChild = "div",
109	...divProps
110}: AnimatedGroupProps) {
111	const selectedVariants = {
112		item: addDefaultVariants(preset ? presetVariants[preset] : {}),
113		container: addDefaultVariants(defaultContainerVariants),
114	};
115	const containerVariants = variants?.container ?? selectedVariants.container;
116	const itemVariants = variants?.item ?? selectedVariants.item;
117 
118	const MotionComponent = motion(as);
119 
120	const MotionChild = motion(asChild);
121 
122	return (
123		<MotionComponent
124// … truncated