animark-react 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MotionAnimatedWrapper.d.ts","sourceRoot":"","sources":["../src/MotionAnimatedWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAGpD,UAAU,kBAAkB;IAC1B,SAAS,EAAE,eAAe,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;
|
|
1
|
+
{"version":3,"file":"MotionAnimatedWrapper.d.ts","sourceRoot":"","sources":["../src/MotionAnimatedWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAGpD,UAAU,kBAAkB;IAC1B,SAAS,EAAE,eAAe,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAwC9D,CAAC"}
|
|
@@ -3,50 +3,61 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
3
3
|
import { useEffect, useId } from "react";
|
|
4
4
|
import { motion, useAnimation } from "framer-motion";
|
|
5
5
|
import { useAnimarkContext } from "./AnimarkContext";
|
|
6
|
+
// BUG FIX: delay and duration are now passed into buildVariants so they
|
|
7
|
+
// live inside the `visible` transition object. When controls.start("visible")
|
|
8
|
+
// is called, Framer Motion reads the transition from the variant itself —
|
|
9
|
+
// it ignores any `transition` prop set on the <motion.div>. Previously
|
|
10
|
+
// delay was set only on the component prop and was therefore silently dropped.
|
|
6
11
|
function buildVariants(animation) {
|
|
7
12
|
const dir = animation.direction ?? "up";
|
|
13
|
+
// Convert ms → seconds for Framer Motion
|
|
8
14
|
const duration = (animation.duration ?? 500) / 1000;
|
|
15
|
+
const delay = (animation.delay ?? 0) / 1000;
|
|
16
|
+
// Shared transition object — both duration AND delay live here
|
|
17
|
+
const transition = { duration, delay };
|
|
9
18
|
switch (animation.type) {
|
|
10
19
|
case "fade":
|
|
11
20
|
return {
|
|
12
21
|
hidden: { opacity: 0 },
|
|
13
|
-
visible: { opacity: 1, transition
|
|
22
|
+
visible: { opacity: 1, transition },
|
|
14
23
|
};
|
|
15
24
|
case "slide": {
|
|
25
|
+
// "up" / "left" → content starts offset in the positive direction
|
|
26
|
+
// "down" / "right" → content starts offset in the negative direction
|
|
16
27
|
const sign = dir === "right" || dir === "down" ? -1 : 1;
|
|
17
28
|
if (dir === "left" || dir === "right") {
|
|
18
29
|
return {
|
|
19
30
|
hidden: { opacity: 0, x: sign * 24 },
|
|
20
|
-
visible: { opacity: 1, x: 0, transition
|
|
31
|
+
visible: { opacity: 1, x: 0, transition },
|
|
21
32
|
};
|
|
22
33
|
}
|
|
23
34
|
return {
|
|
24
35
|
hidden: { opacity: 0, y: sign * 24 },
|
|
25
|
-
visible: { opacity: 1, y: 0, transition
|
|
36
|
+
visible: { opacity: 1, y: 0, transition },
|
|
26
37
|
};
|
|
27
38
|
}
|
|
28
39
|
case "scale":
|
|
29
40
|
return {
|
|
30
41
|
hidden: { opacity: 0, scale: 0.88 },
|
|
31
|
-
visible: { opacity: 1, scale: 1, transition
|
|
42
|
+
visible: { opacity: 1, scale: 1, transition },
|
|
32
43
|
};
|
|
33
44
|
case "move": {
|
|
34
45
|
const sign = dir === "right" || dir === "down" ? -1 : 1;
|
|
35
46
|
if (dir === "left" || dir === "right") {
|
|
36
47
|
return {
|
|
37
48
|
hidden: { x: sign * 12 },
|
|
38
|
-
visible: { x: 0, transition
|
|
49
|
+
visible: { x: 0, transition },
|
|
39
50
|
};
|
|
40
51
|
}
|
|
41
52
|
return {
|
|
42
53
|
hidden: { y: sign * 12 },
|
|
43
|
-
visible: { y: 0, transition
|
|
54
|
+
visible: { y: 0, transition },
|
|
44
55
|
};
|
|
45
56
|
}
|
|
46
57
|
default:
|
|
47
58
|
return {
|
|
48
59
|
hidden: { opacity: 0 },
|
|
49
|
-
visible: { opacity: 1, transition
|
|
60
|
+
visible: { opacity: 1, transition },
|
|
50
61
|
};
|
|
51
62
|
}
|
|
52
63
|
}
|
|
@@ -56,18 +67,22 @@ export const MotionAnimatedWrapper = ({ animation, children, className = "", })
|
|
|
56
67
|
const controls = useAnimation();
|
|
57
68
|
const duration = animation.duration ?? 500;
|
|
58
69
|
const delay = animation.delay ?? 0;
|
|
59
|
-
|
|
60
|
-
// Register with the timeline
|
|
70
|
+
// Register with the timeline so the progress bar knows the full duration
|
|
61
71
|
useEffect(() => {
|
|
62
72
|
registerBlock(id, delay, duration);
|
|
63
73
|
return () => unregisterBlock(id);
|
|
64
74
|
}, [id, delay, duration, registerBlock, unregisterBlock]);
|
|
65
|
-
// Re-run animation whenever playCount increments (replay triggered)
|
|
75
|
+
// Re-run animation whenever playCount increments (replay triggered).
|
|
76
|
+
// controls.start("visible") will now correctly pick up both duration
|
|
77
|
+
// and delay from inside the variant's transition object.
|
|
66
78
|
useEffect(() => {
|
|
67
79
|
controls.set("hidden");
|
|
68
80
|
controls.start("visible");
|
|
69
81
|
}, [playCount, controls]);
|
|
70
82
|
const variants = buildVariants(animation);
|
|
71
|
-
return (
|
|
83
|
+
return (
|
|
84
|
+
// No `transition` prop here — all timing lives inside the variants so
|
|
85
|
+
// controls.start() picks them up correctly.
|
|
86
|
+
_jsx(motion.div, { className: `animark-wrapper ${className}`.trim(), variants: variants, initial: "hidden", animate: controls, children: children }));
|
|
72
87
|
};
|
|
73
88
|
//# sourceMappingURL=MotionAnimatedWrapper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MotionAnimatedWrapper.js","sourceRoot":"","sources":["../src/MotionAnimatedWrapper.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAiB,MAAM,eAAe,CAAC;AAEpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAQrD,SAAS,aAAa,CAAC,SAA0B;IAC/C,MAAM,GAAG,GAAG,SAAS,CAAC,SAAS,IAAI,IAAI,CAAC;IACxC,MAAM,QAAQ,GAAG,CAAC,SAAS,CAAC,QAAQ,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC;IAEpD,QAAQ,SAAS,CAAC,IAAI,EAAE,CAAC;QACvB,KAAK,MAAM;YACT,OAAO;gBACL,MAAM,EAAG,EAAE,OAAO,EAAE,CAAC,EAAE;gBACvB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,UAAU,EAAE
|
|
1
|
+
{"version":3,"file":"MotionAnimatedWrapper.js","sourceRoot":"","sources":["../src/MotionAnimatedWrapper.tsx"],"names":[],"mappings":"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"}
|