framer-motion 12.4.13 → 12.6.0

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.
Files changed (100) hide show
  1. package/README.md +1 -1
  2. package/dist/cjs/client.js +1 -1
  3. package/dist/cjs/{create-DkTZDHiS.js → create-CgwP8YNL.js} +4234 -4792
  4. package/dist/cjs/debug.js +5 -281
  5. package/dist/cjs/dom-mini.js +9 -7
  6. package/dist/cjs/dom.js +81 -639
  7. package/dist/cjs/index.js +1555 -1553
  8. package/dist/cjs/m.js +11 -179
  9. package/dist/cjs/mini.js +8 -0
  10. package/dist/debug.d.ts +2 -35
  11. package/dist/dom-mini.d.ts +1 -181
  12. package/dist/dom-mini.js +1 -1
  13. package/dist/dom.d.ts +3 -242
  14. package/dist/dom.js +1 -1
  15. package/dist/es/animation/animate/single-value.mjs +1 -1
  16. package/dist/es/animation/animators/BaseAnimation.mjs +1 -1
  17. package/dist/es/animation/animators/MainThreadAnimation.mjs +1 -2
  18. package/dist/es/animation/animators/drivers/driver-frameloop.mjs +1 -2
  19. package/dist/es/animation/animators/waapi/index.mjs +1 -3
  20. package/dist/es/animation/generators/utils/velocity.mjs +1 -1
  21. package/dist/es/animation/interfaces/motion-value.mjs +2 -4
  22. package/dist/es/animation/interfaces/visual-element-target.mjs +1 -2
  23. package/dist/es/animation/optimized-appear/start.mjs +3 -3
  24. package/dist/es/animation/sequence/utils/edit.mjs +1 -1
  25. package/dist/es/components/AnimatePresence/index.mjs +1 -1
  26. package/dist/es/components/Reorder/utils/check-reorder.mjs +1 -1
  27. package/dist/es/debug.mjs +1 -1
  28. package/dist/es/dom.mjs +1 -5
  29. package/dist/es/gestures/drag/VisualElementDragControls.mjs +1 -2
  30. package/dist/es/gestures/hover.mjs +1 -2
  31. package/dist/es/gestures/pan/PanSession.mjs +1 -2
  32. package/dist/es/gestures/pan/index.mjs +1 -1
  33. package/dist/es/gestures/press.mjs +1 -2
  34. package/dist/es/index.mjs +14 -19
  35. package/dist/es/motion/features/layout/MeasureLayout.mjs +1 -2
  36. package/dist/es/motion/utils/use-visual-element.mjs +6 -6
  37. package/dist/es/projection/node/create-projection-node.mjs +2 -8
  38. package/dist/es/projection/shared/stack.mjs +1 -1
  39. package/dist/es/projection.mjs +1 -3
  40. package/dist/es/render/VisualElement.mjs +2 -5
  41. package/dist/es/render/components/create-proxy.mjs +1 -1
  42. package/dist/es/render/dom/DOMVisualElement.mjs +1 -1
  43. package/dist/es/render/dom/scroll/info.mjs +1 -2
  44. package/dist/es/render/dom/scroll/observe.mjs +1 -1
  45. package/dist/es/render/dom/scroll/on-scroll-handler.mjs +1 -1
  46. package/dist/es/render/dom/scroll/track.mjs +1 -1
  47. package/dist/es/render/svg/SVGVisualElement.mjs +1 -1
  48. package/dist/es/render/svg/config-motion.mjs +1 -1
  49. package/dist/es/render/utils/KeyframesResolver.mjs +1 -1
  50. package/dist/es/render/utils/flat-tree.mjs +1 -1
  51. package/dist/es/render/utils/motion-values.mjs +3 -3
  52. package/dist/es/render/utils/setters.mjs +1 -1
  53. package/dist/es/utils/delay.mjs +1 -2
  54. package/dist/es/utils/reduced-motion/use-reduced-motion.mjs +1 -1
  55. package/dist/es/utils/use-animation-frame.mjs +1 -1
  56. package/dist/es/utils/use-force-update.mjs +1 -1
  57. package/dist/es/utils/use-instant-transition.mjs +1 -1
  58. package/dist/es/value/scroll/use-element-scroll.mjs +1 -1
  59. package/dist/es/value/scroll/use-viewport-scroll.mjs +1 -1
  60. package/dist/es/value/use-combine-values.mjs +2 -2
  61. package/dist/es/value/use-computed.mjs +1 -1
  62. package/dist/es/value/use-inverted-scale.mjs +3 -3
  63. package/dist/es/value/use-motion-value.mjs +1 -1
  64. package/dist/es/value/use-scroll.mjs +4 -4
  65. package/dist/es/value/use-spring.mjs +1 -1
  66. package/dist/es/value/use-transform.mjs +1 -1
  67. package/dist/es/value/use-velocity.mjs +1 -1
  68. package/dist/es/value/use-will-change/WillChangeMotionValue.mjs +2 -2
  69. package/dist/framer-motion.dev.js +8227 -8251
  70. package/dist/framer-motion.js +1 -1
  71. package/dist/m.d.ts +49 -241
  72. package/dist/size-rollup-animate.js +1 -1
  73. package/dist/size-rollup-dom-animation-assets.js +1 -1
  74. package/dist/size-rollup-dom-animation.js +1 -1
  75. package/dist/size-rollup-dom-max-assets.js +1 -1
  76. package/dist/size-rollup-dom-max.js +1 -1
  77. package/dist/size-rollup-m.js +1 -1
  78. package/dist/size-rollup-motion.js +1 -1
  79. package/dist/size-rollup-scroll.js +1 -1
  80. package/dist/types/client.d.ts +2 -2
  81. package/dist/types/index.d.ts +43 -79
  82. package/dist/{types.d-6pKw1mTI.d.ts → types.d-B50aGbjN.d.ts} +81 -289
  83. package/package.json +4 -6
  84. package/dist/es/frameloop/batcher.mjs +0 -69
  85. package/dist/es/frameloop/frame.mjs +0 -6
  86. package/dist/es/frameloop/index-legacy.mjs +0 -20
  87. package/dist/es/frameloop/microtask.mjs +0 -5
  88. package/dist/es/frameloop/order.mjs +0 -10
  89. package/dist/es/frameloop/render-step.mjs +0 -92
  90. package/dist/es/frameloop/sync-time.mjs +0 -31
  91. package/dist/es/stats/animation-count.mjs +0 -7
  92. package/dist/es/stats/buffer.mjs +0 -6
  93. package/dist/es/stats/index.mjs +0 -113
  94. package/dist/es/utils/GlobalConfig.mjs +0 -6
  95. package/dist/es/utils/array.mjs +0 -21
  96. package/dist/es/utils/subscription-manager.mjs +0 -40
  97. package/dist/es/utils/velocity-per-second.mjs +0 -11
  98. package/dist/es/utils/warn-once.mjs +0 -11
  99. package/dist/es/value/index.mjs +0 -319
  100. package/dist/three.d.ts +0 -2833
@@ -1,13 +1,9 @@
1
1
  /// <reference types="react" />
2
- import { Easing, TransformProperties, SVGPathProperties, VariableKeyframesDefinition, AnimationPlaybackControls, ValueAnimationOptions, Transition as Transition$1, EasingFunction, ProgressTimeline } from 'motion-dom';
2
+ import { Easing, TransformProperties, SVGPathProperties, VariableKeyframesDefinition, MotionValue, AnimationPlaybackControls, ValueAnimationOptions, Transition as Transition$1, EasingFunction, ProgressTimeline, Batcher } from 'motion-dom';
3
3
  import * as React$1 from 'react';
4
4
  import { SVGAttributes, CSSProperties, PropsWithoutRef, RefAttributes, JSX } from 'react';
5
5
  import * as react_jsx_runtime from 'react/jsx-runtime';
6
6
 
7
- type RefObject<T> = {
8
- current: T | null;
9
- };
10
-
11
7
  interface Point {
12
8
  x: number;
13
9
  y: number;
@@ -38,81 +34,6 @@ interface Delta {
38
34
  }
39
35
  type TransformPoint = (point: Point) => Point;
40
36
 
41
- /**
42
- * Passed in to pan event handlers like `onPan` the `PanInfo` object contains
43
- * information about the current state of the tap gesture such as its
44
- * `point`, `delta`, `offset` and `velocity`.
45
- *
46
- * ```jsx
47
- * <motion.div onPan={(event, info) => {
48
- * console.log(info.point.x, info.point.y)
49
- * }} />
50
- * ```
51
- *
52
- * @public
53
- */
54
- interface PanInfo {
55
- /**
56
- * Contains `x` and `y` values for the current pan position relative
57
- * to the device or page.
58
- *
59
- * ```jsx
60
- * function onPan(event, info) {
61
- * console.log(info.point.x, info.point.y)
62
- * }
63
- *
64
- * <motion.div onPan={onPan} />
65
- * ```
66
- *
67
- * @public
68
- */
69
- point: Point;
70
- /**
71
- * Contains `x` and `y` values for the distance moved since
72
- * the last event.
73
- *
74
- * ```jsx
75
- * function onPan(event, info) {
76
- * console.log(info.delta.x, info.delta.y)
77
- * }
78
- *
79
- * <motion.div onPan={onPan} />
80
- * ```
81
- *
82
- * @public
83
- */
84
- delta: Point;
85
- /**
86
- * Contains `x` and `y` values for the distance moved from
87
- * the first pan event.
88
- *
89
- * ```jsx
90
- * function onPan(event, info) {
91
- * console.log(info.offset.x, info.offset.y)
92
- * }
93
- *
94
- * <motion.div onPan={onPan} />
95
- * ```
96
- *
97
- * @public
98
- */
99
- offset: Point;
100
- /**
101
- * Contains `x` and `y` values for the current velocity of the pointer, in px/ms.
102
- *
103
- * ```jsx
104
- * function onPan(event, info) {
105
- * console.log(info.velocity.x, info.velocity.y)
106
- * }
107
- *
108
- * <motion.div onPan={onPan} />
109
- * ```
110
- *
111
- * @public
112
- */
113
- velocity: Point;
114
- }
115
-
116
37
  type GenericKeyframesTarget<V> = V[] | Array<null | V>;
117
38
  /**
118
39
  * @public
@@ -989,6 +910,85 @@ interface CustomValueType {
989
910
  toValue: () => number | string;
990
911
  }
991
912
 
913
+ type RefObject<T> = {
914
+ current: T | null;
915
+ };
916
+
917
+ /**
918
+ * Passed in to pan event handlers like `onPan` the `PanInfo` object contains
919
+ * information about the current state of the tap gesture such as its
920
+ * `point`, `delta`, `offset` and `velocity`.
921
+ *
922
+ * ```jsx
923
+ * <motion.div onPan={(event, info) => {
924
+ * console.log(info.point.x, info.point.y)
925
+ * }} />
926
+ * ```
927
+ *
928
+ * @public
929
+ */
930
+ interface PanInfo {
931
+ /**
932
+ * Contains `x` and `y` values for the current pan position relative
933
+ * to the device or page.
934
+ *
935
+ * ```jsx
936
+ * function onPan(event, info) {
937
+ * console.log(info.point.x, info.point.y)
938
+ * }
939
+ *
940
+ * <motion.div onPan={onPan} />
941
+ * ```
942
+ *
943
+ * @public
944
+ */
945
+ point: Point;
946
+ /**
947
+ * Contains `x` and `y` values for the distance moved since
948
+ * the last event.
949
+ *
950
+ * ```jsx
951
+ * function onPan(event, info) {
952
+ * console.log(info.delta.x, info.delta.y)
953
+ * }
954
+ *
955
+ * <motion.div onPan={onPan} />
956
+ * ```
957
+ *
958
+ * @public
959
+ */
960
+ delta: Point;
961
+ /**
962
+ * Contains `x` and `y` values for the distance moved from
963
+ * the first pan event.
964
+ *
965
+ * ```jsx
966
+ * function onPan(event, info) {
967
+ * console.log(info.offset.x, info.offset.y)
968
+ * }
969
+ *
970
+ * <motion.div onPan={onPan} />
971
+ * ```
972
+ *
973
+ * @public
974
+ */
975
+ offset: Point;
976
+ /**
977
+ * Contains `x` and `y` values for the current velocity of the pointer, in px/ms.
978
+ *
979
+ * ```jsx
980
+ * function onPan(event, info) {
981
+ * console.log(info.velocity.x, info.velocity.y)
982
+ * }
983
+ *
984
+ * <motion.div onPan={onPan} />
985
+ * ```
986
+ *
987
+ * @public
988
+ */
989
+ velocity: Point;
990
+ }
991
+
992
992
  type ReducedMotionConfig = "always" | "never" | "user";
993
993
  /**
994
994
  * @public
@@ -1088,194 +1088,6 @@ interface UseVisualStateConfig<Instance, RenderState> {
1088
1088
  }
1089
1089
  declare const makeUseVisualState: <I, RS>(config: UseVisualStateConfig<I, RS>) => UseVisualState<I, RS>;
1090
1090
 
1091
- /**
1092
- * @public
1093
- */
1094
- type Subscriber<T> = (v: T) => void;
1095
- /**
1096
- * @public
1097
- */
1098
- type PassiveEffect<T> = (v: T, safeSetter: (v: T) => void) => void;
1099
- interface MotionValueEventCallbacks<V> {
1100
- animationStart: () => void;
1101
- animationComplete: () => void;
1102
- animationCancel: () => void;
1103
- change: (latestValue: V) => void;
1104
- renderRequest: () => void;
1105
- }
1106
- interface ResolvedValues$1 {
1107
- [key: string]: string | number;
1108
- }
1109
- interface Owner {
1110
- current: HTMLElement | unknown;
1111
- getProps: () => {
1112
- onUpdate?: (latest: ResolvedValues$1) => void;
1113
- transformTemplate?: (transform: TransformProperties, generatedTransform: string) => string;
1114
- };
1115
- }
1116
- interface MotionValueOptions {
1117
- owner?: Owner;
1118
- }
1119
- /**
1120
- * `MotionValue` is used to track the state and velocity of motion values.
1121
- *
1122
- * @public
1123
- */
1124
- declare class MotionValue<V = any> {
1125
- /**
1126
- * This will be replaced by the build step with the latest version number.
1127
- * When MotionValues are provided to motion components, warn if versions are mixed.
1128
- */
1129
- version: string;
1130
- /**
1131
- * If a MotionValue has an owner, it was created internally within Motion
1132
- * and therefore has no external listeners. It is therefore safe to animate via WAAPI.
1133
- */
1134
- owner?: Owner;
1135
- /**
1136
- * The current state of the `MotionValue`.
1137
- */
1138
- private current;
1139
- /**
1140
- * The previous state of the `MotionValue`.
1141
- */
1142
- private prev;
1143
- /**
1144
- * The previous state of the `MotionValue` at the end of the previous frame.
1145
- */
1146
- private prevFrameValue;
1147
- /**
1148
- * The last time the `MotionValue` was updated.
1149
- */
1150
- updatedAt: number;
1151
- /**
1152
- * The time `prevFrameValue` was updated.
1153
- */
1154
- prevUpdatedAt: number | undefined;
1155
- private stopPassiveEffect?;
1156
- /**
1157
- * A reference to the currently-controlling animation.
1158
- */
1159
- animation?: AnimationPlaybackControls;
1160
- setCurrent(current: V): void;
1161
- setPrevFrameValue(prevFrameValue?: V | undefined): void;
1162
- /**
1163
- * Adds a function that will be notified when the `MotionValue` is updated.
1164
- *
1165
- * It returns a function that, when called, will cancel the subscription.
1166
- *
1167
- * When calling `onChange` inside a React component, it should be wrapped with the
1168
- * `useEffect` hook. As it returns an unsubscribe function, this should be returned
1169
- * from the `useEffect` function to ensure you don't add duplicate subscribers..
1170
- *
1171
- * ```jsx
1172
- * export const MyComponent = () => {
1173
- * const x = useMotionValue(0)
1174
- * const y = useMotionValue(0)
1175
- * const opacity = useMotionValue(1)
1176
- *
1177
- * useEffect(() => {
1178
- * function updateOpacity() {
1179
- * const maxXY = Math.max(x.get(), y.get())
1180
- * const newOpacity = transform(maxXY, [0, 100], [1, 0])
1181
- * opacity.set(newOpacity)
1182
- * }
1183
- *
1184
- * const unsubscribeX = x.on("change", updateOpacity)
1185
- * const unsubscribeY = y.on("change", updateOpacity)
1186
- *
1187
- * return () => {
1188
- * unsubscribeX()
1189
- * unsubscribeY()
1190
- * }
1191
- * }, [])
1192
- *
1193
- * return <motion.div style={{ x }} />
1194
- * }
1195
- * ```
1196
- *
1197
- * @param subscriber - A function that receives the latest value.
1198
- * @returns A function that, when called, will cancel this subscription.
1199
- *
1200
- * @deprecated
1201
- */
1202
- onChange(subscription: Subscriber<V>): () => void;
1203
- /**
1204
- * An object containing a SubscriptionManager for each active event.
1205
- */
1206
- private events;
1207
- on<EventName extends keyof MotionValueEventCallbacks<V>>(eventName: EventName, callback: MotionValueEventCallbacks<V>[EventName]): VoidFunction;
1208
- clearListeners(): void;
1209
- /**
1210
- * Sets the state of the `MotionValue`.
1211
- *
1212
- * @remarks
1213
- *
1214
- * ```jsx
1215
- * const x = useMotionValue(0)
1216
- * x.set(10)
1217
- * ```
1218
- *
1219
- * @param latest - Latest value to set.
1220
- * @param render - Whether to notify render subscribers. Defaults to `true`
1221
- *
1222
- * @public
1223
- */
1224
- set(v: V, render?: boolean): void;
1225
- setWithVelocity(prev: V, current: V, delta: number): void;
1226
- /**
1227
- * Set the state of the `MotionValue`, stopping any active animations,
1228
- * effects, and resets velocity to `0`.
1229
- */
1230
- jump(v: V, endAnimation?: boolean): void;
1231
- updateAndNotify: (v: V, render?: boolean) => void;
1232
- /**
1233
- * Returns the latest state of `MotionValue`
1234
- *
1235
- * @returns - The latest state of `MotionValue`
1236
- *
1237
- * @public
1238
- */
1239
- get(): NonNullable<V>;
1240
- /**
1241
- * @public
1242
- */
1243
- getPrevious(): V | undefined;
1244
- /**
1245
- * Returns the latest velocity of `MotionValue`
1246
- *
1247
- * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
1248
- *
1249
- * @public
1250
- */
1251
- getVelocity(): number;
1252
- hasAnimated: boolean;
1253
- /**
1254
- * Stop the currently active animation.
1255
- *
1256
- * @public
1257
- */
1258
- stop(): void;
1259
- /**
1260
- * Returns `true` if this value is currently animating.
1261
- *
1262
- * @public
1263
- */
1264
- isAnimating(): boolean;
1265
- private clearAnimation;
1266
- /**
1267
- * Destroy and clean up subscribers to this `MotionValue`.
1268
- *
1269
- * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
1270
- * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
1271
- * created a `MotionValue` via the `motionValue` function.
1272
- *
1273
- * @public
1274
- */
1275
- destroy(): void;
1276
- }
1277
- declare function motionValue<V>(init: V, options?: MotionValueOptions): MotionValue<V>;
1278
-
1279
1091
  type ScrapeMotionValuesFromProps = (props: MotionProps, prevProps: MotionProps, visualElement?: VisualElement) => {
1280
1092
  [key: string]: MotionValue | string | number;
1281
1093
  };
@@ -3122,26 +2934,6 @@ declare class ScrollTimeline implements ProgressTimeline {
3122
2934
  }
3123
2935
  declare function scroll(onScroll: OnScroll | AnimationPlaybackControls, { axis, ...options }?: ScrollOptions): VoidFunction;
3124
2936
 
3125
- type Process = (data: FrameData) => void;
3126
- type Schedule = (process: Process, keepAlive?: boolean, immediate?: boolean) => Process;
3127
- interface Step {
3128
- schedule: Schedule;
3129
- cancel: (process: Process) => void;
3130
- process: (data: FrameData) => void;
3131
- }
3132
- type StepId = "read" | "resolveKeyframes" | "update" | "preRender" | "render" | "postRender";
3133
- type Batcher = {
3134
- [key in StepId]: Schedule;
3135
- };
3136
- type Steps = {
3137
- [key in StepId]: Step;
3138
- };
3139
- interface FrameData {
3140
- delta: number;
3141
- timestamp: number;
3142
- isProcessing: boolean;
3143
- }
3144
-
3145
2937
  type UnionStringArray<T extends Readonly<string[]>> = T[number];
3146
2938
  declare const svgElements: readonly ["animate", "circle", "defs", "desc", "ellipse", "g", "image", "line", "filter", "marker", "mask", "metadata", "path", "pattern", "polygon", "polyline", "rect", "stop", "svg", "switch", "symbol", "text", "tspan", "use", "view", "clipPath", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "foreignObject", "linearGradient", "radialGradient", "textPath"];
3147
2939
  type SVGElements = UnionStringArray<typeof svgElements>;
@@ -3222,4 +3014,4 @@ declare global {
3222
3014
 
3223
3015
  type DOMMotionComponents = HTMLMotionComponents & SVGMotionComponents;
3224
3016
 
3225
- export { type MotionTransform as $, type Axis as A, type Batcher as B, type CustomValueType as C, type DOMMotionComponents as D, type EventInfo as E, type FeatureBundle as F, type GenericKeyframesTarget as G, type HTMLMotionProps as H, type IProjectionNode as I, optimizedAppearDataAttribute as J, KeyframeResolver as K, PresenceContext as L, type MotionProps as M, SwitchLayoutGroupContext as N, type OnScrollInfo as O, type Process as P, type DragElastic as Q, type ResolvedKeyframes as R, type ScrollInfoOptions as S, type TapHandlers as T, type DragHandlers as U, VisualElement as V, type DraggableProps as W, type LayoutProps as X, type AnimationProps as Y, type MotionAdvancedProps as Z, type MotionStyle as _, MotionConfigContext as a, type VariantLabels as a0, type ForwardRefComponent as a1, type SVGAttributesAsMotionValues as a2, type SVGMotionProps as a3, type AnimationLifecycles as a4, type CreateVisualElement as a5, FlatTree as a6, type Inertia as a7, type Keyframes as a8, type KeyframesTarget as a9, type FeatureDefinition as aA, type FeatureDefinitions as aB, type FeaturePackage as aC, type LazyFeatureBundle as aD, type RenderComponent as aE, type BoundingBox as aF, type AxisDelta as aG, type Delta as aH, type TransformPoint as aI, type None as aa, type Orchestration as ab, type Repeat as ac, type ResolvedKeyframesTarget as ad, type ResolvedSingleTarget as ae, type ResolvedValueTarget as af, type SingleTarget as ag, type Spring as ah, type Target as ai, type TargetAndTransition as aj, type Transition as ak, type Tween as al, type ValueTarget as am, type Variant as an, type Variants as ao, type ResolveKeyframes as ap, scroll as aq, motionValue as ar, type PassiveEffect as as, type Subscriber as at, type ScrapeMotionValuesFromProps as au, type AnimationType as av, makeUseVisualState as aw, type VisualState as ax, type HydratedFeatureDefinition as ay, type HydratedFeatureDefinitions as az, type HTMLElements as b, MotionValue as c, type FrameData as d, type Steps as e, type Point as f, type MotionComponentProps as g, type HTMLMotionComponents as h, type SVGMotionComponents as i, type FeaturePackages as j, type Box as k, type MotionValueEventCallbacks as l, type ValueAnimationOptionsWithRenderContext as m, type AnimationControls as n, type AnimationDefinition as o, type VisualElementAnimationOptions as p, type ResolvedValues as q, type HTMLRenderState as r, DragControls as s, type PanInfo as t, useDragControls as u, type FocusHandlers as v, type HoverHandlers as w, type PanHandlers as x, type TapInfo as y, createRendererMotionComponent as z };
3017
+ export { type ForwardRefComponent as $, type Axis as A, type Box as B, type CustomValueType as C, type DOMMotionComponents as D, type EventInfo as E, type FeatureBundle as F, type GenericKeyframesTarget as G, type HTMLMotionProps as H, type IProjectionNode as I, SwitchLayoutGroupContext as J, KeyframeResolver as K, type DragElastic as L, type MotionProps as M, type DraggableProps as N, type OnScrollInfo as O, type Point as P, type DragHandlers as Q, type ResolvedKeyframes as R, type ScrollInfoOptions as S, type TapHandlers as T, type LayoutProps as U, type ValueAnimationOptionsWithRenderContext as V, type AnimationProps as W, type MotionAdvancedProps as X, type MotionStyle as Y, type MotionTransform as Z, type VariantLabels as _, MotionConfigContext as a, type SVGAttributesAsMotionValues as a0, type SVGMotionProps as a1, type AnimationLifecycles as a2, type CreateVisualElement as a3, FlatTree as a4, type Inertia as a5, type Keyframes as a6, type KeyframesTarget as a7, type None as a8, type Orchestration as a9, type Repeat as aa, type ResolvedKeyframesTarget as ab, type ResolvedSingleTarget as ac, type ResolvedValueTarget as ad, type SingleTarget as ae, type Spring as af, type Target as ag, type TargetAndTransition as ah, type Transition as ai, type Tween as aj, type ValueTarget as ak, type Variant as al, type Variants as am, type ResolveKeyframes as an, scroll as ao, type HydratedFeatureDefinition as ap, type HydratedFeatureDefinitions as aq, type FeatureDefinition as ar, type FeatureDefinitions as as, type FeaturePackage as at, type LazyFeatureBundle as au, type RenderComponent as av, type BoundingBox as aw, type AxisDelta as ax, type Delta as ay, type TransformPoint as az, type HTMLElements as b, type MotionComponentProps as c, type HTMLMotionComponents as d, type SVGMotionComponents as e, type FeaturePackages as f, type AnimationControls as g, VisualElement as h, type AnimationDefinition as i, type VisualElementAnimationOptions as j, type ResolvedValues as k, type HTMLRenderState as l, type ScrapeMotionValuesFromProps as m, makeUseVisualState as n, type VisualState as o, type AnimationType as p, DragControls as q, type PanInfo as r, type FocusHandlers as s, type HoverHandlers as t, useDragControls as u, type PanHandlers as v, type TapInfo as w, createRendererMotionComponent as x, optimizedAppearDataAttribute as y, PresenceContext as z };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "framer-motion",
3
- "version": "12.4.13",
3
+ "version": "12.6.0",
4
4
  "description": "A simple and powerful JavaScript animation library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/es/index.mjs",
@@ -61,8 +61,6 @@
61
61
  "keywords": [
62
62
  "react animation",
63
63
  "react",
64
- "three",
65
- "3d",
66
64
  "pose",
67
65
  "react pose",
68
66
  "animation",
@@ -89,8 +87,8 @@
89
87
  "measure": "rollup -c ./rollup.size.config.mjs"
90
88
  },
91
89
  "dependencies": {
92
- "motion-dom": "^12.4.11",
93
- "motion-utils": "^12.4.10",
90
+ "motion-dom": "^12.6.0",
91
+ "motion-utils": "^12.5.0",
94
92
  "tslib": "^2.4.0"
95
93
  },
96
94
  "devDependencies": {
@@ -144,5 +142,5 @@
144
142
  "maxSize": "2.7 kB"
145
143
  }
146
144
  ],
147
- "gitHead": "ac0bc2f6003a20face739983390102b033d291df"
145
+ "gitHead": "1c1f25b8fb696e07eb5807ba7ac5b03a832d0a00"
148
146
  }
@@ -1,69 +0,0 @@
1
- import { MotionGlobalConfig } from '../utils/GlobalConfig.mjs';
2
- import { stepsOrder } from './order.mjs';
3
- import { createRenderStep } from './render-step.mjs';
4
-
5
- const maxElapsed = 40;
6
- function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
7
- let runNextFrame = false;
8
- let useDefaultElapsed = true;
9
- const state = {
10
- delta: 0.0,
11
- timestamp: 0.0,
12
- isProcessing: false,
13
- };
14
- const flagRunNextFrame = () => (runNextFrame = true);
15
- const steps = stepsOrder.reduce((acc, key) => {
16
- acc[key] = createRenderStep(flagRunNextFrame, allowKeepAlive ? key : undefined);
17
- return acc;
18
- }, {});
19
- const { read, resolveKeyframes, update, preRender, render, postRender } = steps;
20
- const processBatch = () => {
21
- const timestamp = MotionGlobalConfig.useManualTiming
22
- ? state.timestamp
23
- : performance.now();
24
- runNextFrame = false;
25
- if (!MotionGlobalConfig.useManualTiming) {
26
- state.delta = useDefaultElapsed
27
- ? 1000 / 60
28
- : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);
29
- }
30
- state.timestamp = timestamp;
31
- state.isProcessing = true;
32
- // Unrolled render loop for better per-frame performance
33
- read.process(state);
34
- resolveKeyframes.process(state);
35
- update.process(state);
36
- preRender.process(state);
37
- render.process(state);
38
- postRender.process(state);
39
- state.isProcessing = false;
40
- if (runNextFrame && allowKeepAlive) {
41
- useDefaultElapsed = false;
42
- scheduleNextBatch(processBatch);
43
- }
44
- };
45
- const wake = () => {
46
- runNextFrame = true;
47
- useDefaultElapsed = true;
48
- if (!state.isProcessing) {
49
- scheduleNextBatch(processBatch);
50
- }
51
- };
52
- const schedule = stepsOrder.reduce((acc, key) => {
53
- const step = steps[key];
54
- acc[key] = (process, keepAlive = false, immediate = false) => {
55
- if (!runNextFrame)
56
- wake();
57
- return step.schedule(process, keepAlive, immediate);
58
- };
59
- return acc;
60
- }, {});
61
- const cancel = (process) => {
62
- for (let i = 0; i < stepsOrder.length; i++) {
63
- steps[stepsOrder[i]].cancel(process);
64
- }
65
- };
66
- return { schedule, cancel, state, steps };
67
- }
68
-
69
- export { createRenderBatcher };
@@ -1,6 +0,0 @@
1
- import { noop } from 'motion-utils';
2
- import { createRenderBatcher } from './batcher.mjs';
3
-
4
- const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
5
-
6
- export { cancelFrame, frame, frameData, frameSteps };
@@ -1,20 +0,0 @@
1
- import { stepsOrder } from './order.mjs';
2
- import { frame, cancelFrame } from './frame.mjs';
3
-
4
- /**
5
- * @deprecated
6
- *
7
- * Import as `frame` instead.
8
- */
9
- const sync = frame;
10
- /**
11
- * @deprecated
12
- *
13
- * Use cancelFrame(callback) instead.
14
- */
15
- const cancelSync = stepsOrder.reduce((acc, key) => {
16
- acc[key] = (process) => cancelFrame(process);
17
- return acc;
18
- }, {});
19
-
20
- export { cancelSync, sync };
@@ -1,5 +0,0 @@
1
- import { createRenderBatcher } from './batcher.mjs';
2
-
3
- const { schedule: microtask, cancel: cancelMicrotask } = createRenderBatcher(queueMicrotask, false);
4
-
5
- export { cancelMicrotask, microtask };
@@ -1,10 +0,0 @@
1
- const stepsOrder = [
2
- "read", // Read
3
- "resolveKeyframes", // Write/Read/Write/Read
4
- "update", // Compute
5
- "preRender", // Compute
6
- "render", // Write
7
- "postRender", // Compute
8
- ];
9
-
10
- export { stepsOrder };
@@ -1,92 +0,0 @@
1
- import { statsBuffer } from '../stats/buffer.mjs';
2
-
3
- function createRenderStep(runNextFrame, stepName) {
4
- /**
5
- * We create and reuse two queues, one to queue jobs for the current frame
6
- * and one for the next. We reuse to avoid triggering GC after x frames.
7
- */
8
- let thisFrame = new Set();
9
- let nextFrame = new Set();
10
- /**
11
- * Track whether we're currently processing jobs in this step. This way
12
- * we can decide whether to schedule new jobs for this frame or next.
13
- */
14
- let isProcessing = false;
15
- let flushNextFrame = false;
16
- /**
17
- * A set of processes which were marked keepAlive when scheduled.
18
- */
19
- const toKeepAlive = new WeakSet();
20
- let latestFrameData = {
21
- delta: 0.0,
22
- timestamp: 0.0,
23
- isProcessing: false,
24
- };
25
- let numCalls = 0;
26
- function triggerCallback(callback) {
27
- if (toKeepAlive.has(callback)) {
28
- step.schedule(callback);
29
- runNextFrame();
30
- }
31
- numCalls++;
32
- callback(latestFrameData);
33
- }
34
- const step = {
35
- /**
36
- * Schedule a process to run on the next frame.
37
- */
38
- schedule: (callback, keepAlive = false, immediate = false) => {
39
- const addToCurrentFrame = immediate && isProcessing;
40
- const queue = addToCurrentFrame ? thisFrame : nextFrame;
41
- if (keepAlive)
42
- toKeepAlive.add(callback);
43
- if (!queue.has(callback))
44
- queue.add(callback);
45
- return callback;
46
- },
47
- /**
48
- * Cancel the provided callback from running on the next frame.
49
- */
50
- cancel: (callback) => {
51
- nextFrame.delete(callback);
52
- toKeepAlive.delete(callback);
53
- },
54
- /**
55
- * Execute all schedule callbacks.
56
- */
57
- process: (frameData) => {
58
- latestFrameData = frameData;
59
- /**
60
- * If we're already processing we've probably been triggered by a flushSync
61
- * inside an existing process. Instead of executing, mark flushNextFrame
62
- * as true and ensure we flush the following frame at the end of this one.
63
- */
64
- if (isProcessing) {
65
- flushNextFrame = true;
66
- return;
67
- }
68
- isProcessing = true;
69
- [thisFrame, nextFrame] = [nextFrame, thisFrame];
70
- // Execute this frame
71
- thisFrame.forEach(triggerCallback);
72
- /**
73
- * If we're recording stats then
74
- */
75
- if (stepName && statsBuffer.value) {
76
- statsBuffer.value.frameloop[stepName].push(numCalls);
77
- }
78
- numCalls = 0;
79
- // Clear the frame so no callbacks remain. This is to avoid
80
- // memory leaks should this render step not run for a while.
81
- thisFrame.clear();
82
- isProcessing = false;
83
- if (flushNextFrame) {
84
- flushNextFrame = false;
85
- step.process(frameData);
86
- }
87
- },
88
- };
89
- return step;
90
- }
91
-
92
- export { createRenderStep };
@@ -1,31 +0,0 @@
1
- import { MotionGlobalConfig } from '../utils/GlobalConfig.mjs';
2
- import { frameData } from './frame.mjs';
3
-
4
- let now;
5
- function clearTime() {
6
- now = undefined;
7
- }
8
- /**
9
- * An eventloop-synchronous alternative to performance.now().
10
- *
11
- * Ensures that time measurements remain consistent within a synchronous context.
12
- * Usually calling performance.now() twice within the same synchronous context
13
- * will return different values which isn't useful for animations when we're usually
14
- * trying to sync animations to the same frame.
15
- */
16
- const time = {
17
- now: () => {
18
- if (now === undefined) {
19
- time.set(frameData.isProcessing || MotionGlobalConfig.useManualTiming
20
- ? frameData.timestamp
21
- : performance.now());
22
- }
23
- return now;
24
- },
25
- set: (newTime) => {
26
- now = newTime;
27
- queueMicrotask(clearTime);
28
- },
29
- };
30
-
31
- export { time };