Blur Fade

1<script lang="ts">
2	import { motion, AnimatePresence, useInView, type Variants } from "motion-sv";
3	import { cn } from "$UTILS$";
4	import type { Snippet } from "svelte";
5 
6	type MarginType = string;
7 
8	interface BlurFadeProps {
9		children: Snippet;
10		class?: string;
11		variant?: Variants;
12		exit?: boolean;
13		duration?: number;
14		delay?: number;
15		offset?: number;
16		direction?: "up" | "down" | "left" | "right";
17		triggerOnView?: boolean;
18		inViewMargin?: MarginType;
19		blur?: string;
20		once?: boolean;
21	}
22 
23	let {
24		children,
25		class: className,
26		variant,
27		exit = false,
28		duration = 0.4,
29		delay = 0,
30		offset = 6,
31		direction = "down",
32		triggerOnView = true,
33		inViewMargin = "-50px",
34		blur = "6px",
35		once = true,
36	}: BlurFadeProps = $props();
37 
38	let containerRef: HTMLDivElement | null = $state(null);
39	let view = useInView(
40		() => containerRef!,
41		() =>
42			({
43				once,
44				amount: 0.1,
45				margin: inViewMargin,
46			}) as any
47	);
48 
49	const defaultVariants = $derived.by(() => {
50		return {
51			hidden: {
52				[direction === "left" || direction === "right" ? "x" : "y"]:
53					direction === "right" || direction === "down" ? -offset : offset,
54				opacity: 0,
55				filter: `blur(${blur})`,
56			},
57			visible: {
58				[direction === "left" || direction === "right" ? "x" : "y"]: 0,
59				opacity: 1,
60				filter: `blur(0px)`,
61			},
62		} as Variants;
63	});
64 
65	const combinedVariants = $derived(variant || defaultVariants);
66	const shouldAnimate = $derived(!triggerOnView || view.current);
67</script>
68 
69<div bind:this={containerRef}>
70	<AnimatePresence>
71		<motion.div
72			initial="hidden"
73			animate={shouldAnimate ? "visible" : "hidden"}
74			exit={exit ? "hidden" : undefined}
75			variants={combinedVariants}
76			transition={{
77				delay: 0.04 + delay,
78				duration,
79				ease: "easeOut",
80			}}
81			class={cn(className)}
82		>
83			{@render children()}
84		</motion.div>
85	</AnimatePresence>
86</div>