Text Animate

1<script lang="ts">
2	import { cn } from "$UTILS$";
3	import type { ElementType, MotionProps, Variants } from "motion-sv";
4	import { motion, AnimatePresence } from "motion-sv";
5 
6	type AnimationType = "text" | "word" | "character" | "line";
7	type AnimationVariant =
8		| "fadeIn"
9		| "blurIn"
10		| "blurInUp"
11		| "blurInDown"
12		| "slideUp"
13		| "slideDown"
14		| "slideLeft"
15		| "slideRight"
16		| "scaleUp"
17		| "scaleDown";
18 
19	const staggerTimings: Record<AnimationType, number> = {
20		text: 0.06,
21		word: 0.05,
22		character: 0.03,
23		line: 0.06,
24	};
25 
26	const defaultContainerVariants = {
27		hidden: { opacity: 1 },
28		show: {
29			opacity: 1,
30			transition: {
31				delayChildren: 0,
32				staggerChildren: 0.05,
33			},
34		},
35		exit: {
36			opacity: 0,
37			transition: {
38				staggerChildren: 0.05,
39				staggerDirection: -1,
40			},
41		},
42	};
43	const defaultItemVariants: Variants = {
44		hidden: { opacity: 0 },
45		show: {
46			opacity: 1,
47		},
48		exit: {
49			opacity: 0,
50		},
51	};
52 
53	const defaultItemAnimationVariants: Record<
54		AnimationVariant,
55		{ container: Variants; item: Variants }
56	> = {
57		fadeIn: {
58			container: defaultContainerVariants,
59			item: {
60				hidden: { opacity: 0, y: 20 },
61				show: {
62					opacity: 1,
63					y: 0,
64					transition: {
65						duration: 0.3,
66					},
67				},
68				exit: {
69					opacity: 0,
70					y: 20,
71					transition: { duration: 0.3 },
72				},
73			},
74		},
75		blurIn: {
76			container: defaultContainerVariants,
77			item: {
78				hidden: { opacity: 0, filter: "blur(10px)" },
79				show: {
80					opacity: 1,
81					filter: "blur(0px)",
82					transition: {
83						duration: 0.3,
84					},
85				},
86				exit: {
87					opacity: 0,
88					filter: "blur(10px)",
89					transition: { duration: 0.3 },
90				},
91			},
92		},
93		blurInUp: {
94			container: defaultContainerVariants,
95			item: {
96				hidden: { opacity: 0, filter: "blur(10px)", y: 20 },
97				show: {
98					opacity: 1,
99					filter: "blur(0px)",
100					y: 0,
101					transition: {
102						y: { duration: 0.3 },
103						opacity: { duration: 0.4 },
104						filter: { duration: 0.3 },
105					},
106				},
107				exit: {
108					opacity: 0,
109					filter: "blur(10px)",
110					y: 20,
111					transition: {
112						y: { duration: 0.3 },
113						opacity: { duration: 0.4 },
114						filter: { duration: 0.3 },
115					},
116				},
117			},
118		},
119		blurInDown: {
120			container: defaultContainerVariants,
121			item: {
122				hidden: { opacity: 0, filter: "blur(10px)", y: -20 },
123				show: {
124					opacity: 1,
125					filter: "blur(0px)",
126					y: 0,
127					transition: {
128						y: { duration: 0.3 },
129						opacity: { duration: 0.4 },
130// … truncated