Animated Group

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