xcc.es
[READ-ONLY] Mirror of https://github.com/mrgnw/morganwill.com.
morganwill.com
1.4 kB
48 lines
1import { clsx } from "clsx";
2import { twMerge } from "tailwind-merge";
3import { cubicOut } from "svelte/easing";
4
5export function cn(...inputs) {
6 return twMerge(clsx(inputs));
7}
8
9export const flyAndScale = (
10 node,
11 params = { y: -8, x: 0, start: 0.95, duration: 150 }
12) => {
13 const style = getComputedStyle(node);
14 const transform = style.transform === "none" ? "" : style.transform;
15
16 const scaleConversion = (valueA, scaleA, scaleB) => {
17 const [minA, maxA] = scaleA;
18 const [minB, maxB] = scaleB;
19
20 const percentage = (valueA - minA) / (maxA - minA);
21 const valueB = percentage * (maxB - minB) + minB;
22
23 return valueB;
24 };
25
26 const styleToString = (style) => {
27 return Object.keys(style).reduce((str, key) => {
28 if (style[key] === undefined) return str;
29 return str + `${key}:${style[key]};`;
30 }, "");
31 };
32
33 return {
34 duration: params.duration ?? 200,
35 delay: 0,
36 css: (t) => {
37 const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
38 const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
39 const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
40
41 return styleToString({
42 transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
43 opacity: t
44 });
45 },
46 easing: cubicOut
47 };
48};