framer-motion 7.0.3 → 7.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.
- package/dist/cjs/index.js +2090 -2304
- package/dist/es/animation/animate.mjs +4 -5
- package/dist/es/animation/animation-controls.mjs +22 -24
- package/dist/es/animation/use-animated-state.mjs +23 -25
- package/dist/es/animation/use-animation.mjs +2 -2
- package/dist/es/animation/utils/default-transitions.mjs +13 -14
- package/dist/es/animation/utils/easing.mjs +20 -21
- package/dist/es/animation/utils/is-animatable.mjs +1 -1
- package/dist/es/animation/utils/is-keyframes-target.mjs +1 -1
- package/dist/es/animation/utils/transitions.mjs +30 -31
- package/dist/es/components/AnimatePresence/PresenceChild.mjs +18 -31
- package/dist/es/components/AnimatePresence/index.mjs +33 -35
- package/dist/es/components/AnimatePresence/use-presence.mjs +5 -5
- package/dist/es/components/AnimateSharedLayout.mjs +4 -5
- package/dist/es/components/LayoutGroup/index.mjs +12 -16
- package/dist/es/components/LazyMotion/index.mjs +9 -10
- package/dist/es/components/MotionConfig/index.mjs +5 -5
- package/dist/es/components/Reorder/Group.mjs +16 -16
- package/dist/es/components/Reorder/Item.mjs +14 -18
- package/dist/es/components/Reorder/index.mjs +3 -3
- package/dist/es/components/Reorder/utils/check-reorder.mjs +6 -6
- package/dist/es/context/DeprecatedLayoutGroupContext.mjs +1 -1
- package/dist/es/context/LayoutGroupContext.mjs +1 -1
- package/dist/es/context/LazyContext.mjs +1 -1
- package/dist/es/context/MotionConfigContext.mjs +2 -2
- package/dist/es/context/MotionContext/create.mjs +2 -2
- package/dist/es/context/MotionContext/index.mjs +1 -1
- package/dist/es/context/MotionContext/utils.mjs +1 -1
- package/dist/es/context/PresenceContext.mjs +1 -1
- package/dist/es/context/ReorderContext.mjs +1 -1
- package/dist/es/context/SwitchLayoutGroupContext.mjs +1 -1
- package/dist/es/events/event-info.mjs +11 -17
- package/dist/es/events/use-dom-event.mjs +4 -5
- package/dist/es/events/use-pointer-event.mjs +2 -2
- package/dist/es/events/utils.mjs +3 -9
- package/dist/es/gestures/PanSession.mjs +42 -47
- package/dist/es/gestures/drag/VisualElementDragControls.mjs +147 -157
- package/dist/es/gestures/drag/use-drag-controls.mjs +10 -12
- package/dist/es/gestures/drag/use-drag.mjs +4 -4
- package/dist/es/gestures/drag/utils/constraints.mjs +12 -17
- package/dist/es/gestures/drag/utils/lock.mjs +17 -17
- package/dist/es/gestures/use-focus-gesture.mjs +3 -4
- package/dist/es/gestures/use-hover-gesture.mjs +2 -3
- package/dist/es/gestures/use-pan-gesture.mjs +9 -10
- package/dist/es/gestures/use-tap-gesture.mjs +5 -6
- package/dist/es/gestures/utils/event-type.mjs +1 -1
- package/dist/es/gestures/utils/is-node-or-child.mjs +1 -1
- package/dist/es/index.mjs +1 -0
- package/dist/es/motion/features/animations.mjs +9 -11
- package/dist/es/motion/features/definitions.mjs +5 -5
- package/dist/es/motion/features/drag.mjs +1 -1
- package/dist/es/motion/features/gestures.mjs +1 -1
- package/dist/es/motion/features/layout/MeasureLayout.mjs +32 -40
- package/dist/es/motion/features/layout/index.mjs +1 -1
- package/dist/es/motion/features/use-features.mjs +8 -9
- package/dist/es/motion/features/use-projection.mjs +10 -11
- package/dist/es/motion/features/viewport/observers.mjs +12 -12
- package/dist/es/motion/features/viewport/use-viewport.mjs +17 -20
- package/dist/es/motion/index.mjs +13 -16
- package/dist/es/motion/utils/VisualElementHandler.mjs +10 -16
- package/dist/es/motion/utils/is-forced-motion-value.mjs +1 -2
- package/dist/es/motion/utils/make-renderless-component.mjs +2 -2
- package/dist/es/motion/utils/use-motion-ref.mjs +1 -1
- package/dist/es/motion/utils/use-visual-element.mjs +13 -13
- package/dist/es/motion/utils/use-visual-state.mjs +26 -31
- package/dist/es/motion/utils/valid-prop.mjs +1 -1
- package/dist/es/projection/animation/mix-values.mjs +12 -16
- package/dist/es/projection/geometry/conversion.mjs +4 -6
- package/dist/es/projection/geometry/delta-apply.mjs +14 -20
- package/dist/es/projection/geometry/delta-calc.mjs +2 -5
- package/dist/es/projection/geometry/delta-remove.mjs +6 -13
- package/dist/es/projection/geometry/models.mjs +7 -7
- package/dist/es/projection/node/DocumentProjectionNode.mjs +5 -5
- package/dist/es/projection/node/HTMLProjectionNode.mjs +8 -10
- package/dist/es/projection/node/create-projection-node.mjs +283 -307
- package/dist/es/projection/node/group.mjs +6 -8
- package/dist/es/projection/node/id.mjs +2 -2
- package/dist/es/projection/node/state.mjs +1 -1
- package/dist/es/projection/shared/stack.mjs +26 -27
- package/dist/es/projection/styles/scale-border-radius.mjs +5 -5
- package/dist/es/projection/styles/scale-box-shadow.mjs +18 -19
- package/dist/es/projection/styles/scale-correction.mjs +1 -1
- package/dist/es/projection/styles/transform.mjs +12 -12
- package/dist/es/projection/use-reset-projection.mjs +2 -2
- package/dist/es/projection/utils/has-transform.mjs +1 -2
- package/dist/es/projection/utils/measure.mjs +2 -2
- package/dist/es/render/dom/create-visual-element.mjs +1 -1
- package/dist/es/render/dom/features-animation.mjs +1 -2
- package/dist/es/render/dom/features-max.mjs +1 -2
- package/dist/es/render/dom/motion-minimal.mjs +1 -1
- package/dist/es/render/dom/motion-proxy.mjs +3 -4
- package/dist/es/render/dom/motion.mjs +2 -5
- package/dist/es/render/dom/use-render.mjs +6 -9
- package/dist/es/render/dom/utils/camel-to-dash.mjs +3 -5
- package/dist/es/render/dom/utils/create-config.mjs +5 -5
- package/dist/es/render/dom/utils/css-variables-conversion.mjs +19 -20
- package/dist/es/render/dom/utils/filter-props.mjs +4 -6
- package/dist/es/render/dom/utils/parse-dom-variant.mjs +2 -2
- package/dist/es/render/dom/utils/unit-conversion.mjs +68 -99
- package/dist/es/render/dom/value-types/animatable-none.mjs +1 -1
- package/dist/es/render/dom/value-types/defaults.mjs +4 -5
- package/dist/es/render/dom/value-types/dimensions.mjs +2 -4
- package/dist/es/render/dom/value-types/find.mjs +2 -3
- package/dist/es/render/dom/value-types/get-as-type.mjs +1 -1
- package/dist/es/render/dom/value-types/number.mjs +2 -2
- package/dist/es/render/dom/value-types/test.mjs +1 -1
- package/dist/es/render/dom/value-types/type-auto.mjs +3 -3
- package/dist/es/render/dom/value-types/type-int.mjs +1 -2
- package/dist/es/render/html/config-motion.mjs +1 -1
- package/dist/es/render/html/use-props.mjs +11 -13
- package/dist/es/render/html/utils/build-styles.mjs +8 -8
- package/dist/es/render/html/utils/build-transform.mjs +11 -16
- package/dist/es/render/html/utils/create-render-state.mjs +2 -2
- package/dist/es/render/html/utils/render.mjs +2 -3
- package/dist/es/render/html/utils/scrape-motion-values.mjs +3 -3
- package/dist/es/render/html/utils/transform.mjs +6 -10
- package/dist/es/render/html/visual-element.mjs +22 -23
- package/dist/es/render/index.mjs +359 -364
- package/dist/es/render/svg/config-motion.mjs +2 -3
- package/dist/es/render/svg/lowercase-elements.mjs +1 -1
- package/dist/es/render/svg/use-props.mjs +5 -6
- package/dist/es/render/svg/utils/build-attrs.mjs +2 -2
- package/dist/es/render/svg/utils/camel-case-attrs.mjs +1 -1
- package/dist/es/render/svg/utils/create-render-state.mjs +1 -2
- package/dist/es/render/svg/utils/path.mjs +7 -10
- package/dist/es/render/svg/utils/render.mjs +1 -1
- package/dist/es/render/svg/utils/scrape-motion-values.mjs +3 -3
- package/dist/es/render/svg/utils/transform-origin.mjs +3 -3
- package/dist/es/render/svg/visual-element.mjs +6 -4
- package/dist/es/render/utils/animation-state.mjs +71 -87
- package/dist/es/render/utils/animation.mjs +48 -60
- package/dist/es/render/utils/compare-by-depth.mjs +1 -3
- package/dist/es/render/utils/flat-tree.mjs +9 -10
- package/dist/es/render/utils/lifecycles.mjs +12 -19
- package/dist/es/render/utils/motion-values.mjs +16 -8
- package/dist/es/render/utils/setters.mjs +19 -19
- package/dist/es/render/utils/variants.mjs +6 -8
- package/dist/es/utils/array.mjs +9 -10
- package/dist/es/utils/is-browser.mjs +1 -1
- package/dist/es/utils/is-numerical-string.mjs +1 -1
- package/dist/es/utils/is-zero-value-string.mjs +1 -1
- package/dist/es/utils/process.mjs +2 -2
- package/dist/es/utils/resolve-value.mjs +2 -2
- package/dist/es/utils/shallow-compare.mjs +2 -2
- package/dist/es/utils/subscription-manager.mjs +15 -17
- package/dist/es/utils/time-conversion.mjs +1 -1
- package/dist/es/utils/transform.mjs +10 -15
- package/dist/es/utils/use-animation-frame.mjs +5 -6
- package/dist/es/utils/use-constant.mjs +1 -1
- package/dist/es/utils/use-cycle.mjs +9 -10
- package/dist/es/utils/use-force-update.mjs +4 -5
- package/dist/es/utils/use-in-view.mjs +7 -9
- package/dist/es/utils/use-instant-transition-state.mjs +1 -1
- package/dist/es/utils/use-instant-transition.mjs +6 -9
- package/dist/es/utils/use-is-mounted.mjs +3 -3
- package/dist/es/utils/use-isomorphic-effect.mjs +1 -1
- package/dist/es/utils/use-reduced-motion.mjs +8 -11
- package/dist/es/utils/use-unmount-effect.mjs +1 -1
- package/dist/es/utils/warn-once.mjs +1 -1
- package/dist/es/value/index.mjs +53 -59
- package/dist/es/value/use-combine-values.mjs +3 -3
- package/dist/es/value/use-inverted-scale.mjs +9 -11
- package/dist/es/value/use-motion-template.mjs +5 -9
- package/dist/es/value/use-motion-value.mjs +4 -5
- package/dist/es/value/use-on-change.mjs +4 -4
- package/dist/es/value/use-scroll.mjs +9 -11
- package/dist/es/value/use-spring.mjs +8 -10
- package/dist/es/value/use-time.mjs +2 -2
- package/dist/es/value/use-transform.mjs +6 -10
- package/dist/es/value/use-velocity.mjs +3 -3
- package/dist/es/value/use-will-change/index.mjs +50 -0
- package/dist/es/value/use-will-change/is.mjs +7 -0
- package/dist/es/value/utils/is-motion-value.mjs +1 -1
- package/dist/es/value/utils/resolve-motion-value.mjs +1 -1
- package/dist/framer-motion.dev.js +2134 -2414
- package/dist/framer-motion.js +1 -1
- package/dist/index.d.ts +9 -2
- package/dist/projection.dev.js +1154 -1300
- package/dist/size-rollup-dom-animation.js +1 -1
- package/dist/size-rollup-dom-max.js +1 -1
- package/dist/size-rollup-m.js +1 -1
- package/dist/size-webpack-dom-animation.js +1 -1
- package/dist/size-webpack-dom-max.js +1 -1
- package/dist/size-webpack-m.js +1 -1
- package/dist/three-entry.d.ts +0 -1
- package/package.json +12 -12
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { __read } from 'tslib';
|
|
2
1
|
import { mix } from 'popmotion';
|
|
3
2
|
import { percent } from 'style-value-types';
|
|
4
3
|
import { scalePoint } from './delta-apply.mjs';
|
|
@@ -17,20 +16,15 @@ function removePointDelta(point, translate, scale, originPoint, boxScale) {
|
|
|
17
16
|
/**
|
|
18
17
|
* Remove a delta from an axis. This is essentially the steps of applyAxisDelta in reverse
|
|
19
18
|
*/
|
|
20
|
-
function removeAxisDelta(axis, translate, scale, origin, boxScale, originAxis, sourceAxis) {
|
|
21
|
-
if (translate === void 0) { translate = 0; }
|
|
22
|
-
if (scale === void 0) { scale = 1; }
|
|
23
|
-
if (origin === void 0) { origin = 0.5; }
|
|
24
|
-
if (originAxis === void 0) { originAxis = axis; }
|
|
25
|
-
if (sourceAxis === void 0) { sourceAxis = axis; }
|
|
19
|
+
function removeAxisDelta(axis, translate = 0, scale = 1, origin = 0.5, boxScale, originAxis = axis, sourceAxis = axis) {
|
|
26
20
|
if (percent.test(translate)) {
|
|
27
21
|
translate = parseFloat(translate);
|
|
28
|
-
|
|
22
|
+
const relativeProgress = mix(sourceAxis.min, sourceAxis.max, translate / 100);
|
|
29
23
|
translate = relativeProgress - sourceAxis.min;
|
|
30
24
|
}
|
|
31
25
|
if (typeof translate !== "number")
|
|
32
26
|
return;
|
|
33
|
-
|
|
27
|
+
let originPoint = mix(originAxis.min, originAxis.max, origin);
|
|
34
28
|
if (axis === originAxis)
|
|
35
29
|
originPoint -= translate;
|
|
36
30
|
axis.min = removePointDelta(axis.min, translate, scale, originPoint, boxScale);
|
|
@@ -40,15 +34,14 @@ function removeAxisDelta(axis, translate, scale, origin, boxScale, originAxis, s
|
|
|
40
34
|
* Remove a transforms from an axis. This is essentially the steps of applyAxisTransforms in reverse
|
|
41
35
|
* and acts as a bridge between motion values and removeAxisDelta
|
|
42
36
|
*/
|
|
43
|
-
function removeAxisTransforms(axis, transforms,
|
|
44
|
-
var _b = __read(_a, 3), key = _b[0], scaleKey = _b[1], originKey = _b[2];
|
|
37
|
+
function removeAxisTransforms(axis, transforms, [key, scaleKey, originKey], origin, sourceAxis) {
|
|
45
38
|
removeAxisDelta(axis, transforms[key], transforms[scaleKey], transforms[originKey], transforms.scale, origin, sourceAxis);
|
|
46
39
|
}
|
|
47
40
|
/**
|
|
48
41
|
* The names of the motion values we want to apply as translation, scale and origin.
|
|
49
42
|
*/
|
|
50
|
-
|
|
51
|
-
|
|
43
|
+
const xKeys = ["x", "scaleX", "originX"];
|
|
44
|
+
const yKeys = ["y", "scaleY", "originY"];
|
|
52
45
|
/**
|
|
53
46
|
* Remove a transforms from an box. This is essentially the steps of applyAxisBox in reverse
|
|
54
47
|
* and acts as a bridge between motion values and removeAxisDelta
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
|
|
1
|
+
const createAxisDelta = () => ({
|
|
2
2
|
translate: 0,
|
|
3
3
|
scale: 1,
|
|
4
4
|
origin: 0,
|
|
5
5
|
originPoint: 0,
|
|
6
|
-
});
|
|
7
|
-
|
|
6
|
+
});
|
|
7
|
+
const createDelta = () => ({
|
|
8
8
|
x: createAxisDelta(),
|
|
9
9
|
y: createAxisDelta(),
|
|
10
|
-
});
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
});
|
|
11
|
+
const createAxis = () => ({ min: 0, max: 0 });
|
|
12
|
+
const createBox = () => ({
|
|
13
13
|
x: createAxis(),
|
|
14
14
|
y: createAxis(),
|
|
15
|
-
});
|
|
15
|
+
});
|
|
16
16
|
|
|
17
17
|
export { createAxis, createAxisDelta, createBox, createDelta };
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { createProjectionNode } from './create-projection-node.mjs';
|
|
2
2
|
import { addDomEvent } from '../../events/use-dom-event.mjs';
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
attachResizeListener:
|
|
6
|
-
measureScroll:
|
|
4
|
+
const DocumentProjectionNode = createProjectionNode({
|
|
5
|
+
attachResizeListener: (ref, notify) => addDomEvent(ref, "resize", notify),
|
|
6
|
+
measureScroll: () => ({
|
|
7
7
|
x: document.documentElement.scrollLeft || document.body.scrollLeft,
|
|
8
8
|
y: document.documentElement.scrollTop || document.body.scrollTop,
|
|
9
|
-
})
|
|
10
|
-
checkIsScrollRoot:
|
|
9
|
+
}),
|
|
10
|
+
checkIsScrollRoot: () => true,
|
|
11
11
|
});
|
|
12
12
|
|
|
13
13
|
export { DocumentProjectionNode };
|
|
@@ -1,29 +1,27 @@
|
|
|
1
1
|
import { createProjectionNode } from './create-projection-node.mjs';
|
|
2
2
|
import { DocumentProjectionNode } from './DocumentProjectionNode.mjs';
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
const rootProjectionNode = {
|
|
5
5
|
current: undefined,
|
|
6
6
|
};
|
|
7
|
-
|
|
8
|
-
measureScroll:
|
|
7
|
+
const HTMLProjectionNode = createProjectionNode({
|
|
8
|
+
measureScroll: (instance) => ({
|
|
9
9
|
x: instance.scrollLeft,
|
|
10
10
|
y: instance.scrollTop,
|
|
11
|
-
})
|
|
12
|
-
defaultParent:
|
|
11
|
+
}),
|
|
12
|
+
defaultParent: () => {
|
|
13
13
|
if (!rootProjectionNode.current) {
|
|
14
|
-
|
|
14
|
+
const documentNode = new DocumentProjectionNode(0, {});
|
|
15
15
|
documentNode.mount(window);
|
|
16
16
|
documentNode.setOptions({ layoutScroll: true });
|
|
17
17
|
rootProjectionNode.current = documentNode;
|
|
18
18
|
}
|
|
19
19
|
return rootProjectionNode.current;
|
|
20
20
|
},
|
|
21
|
-
resetTransform:
|
|
21
|
+
resetTransform: (instance, value) => {
|
|
22
22
|
instance.style.transform = value !== null && value !== void 0 ? value : "none";
|
|
23
23
|
},
|
|
24
|
-
checkIsScrollRoot:
|
|
25
|
-
return Boolean(window.getComputedStyle(instance).position === "fixed");
|
|
26
|
-
},
|
|
24
|
+
checkIsScrollRoot: (instance) => Boolean(window.getComputedStyle(instance).position === "fixed"),
|
|
27
25
|
});
|
|
28
26
|
|
|
29
27
|
export { HTMLProjectionNode, rootProjectionNode };
|