framer-motion 12.4.2 → 12.4.4-alpha.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.
- package/dist/cjs/client.js +1 -1
- package/dist/cjs/{create-DkJETE5i.js → create-Cxf19Y4j.js} +38 -25
- package/dist/cjs/dom.js +6 -5
- package/dist/cjs/index.js +1 -1
- package/dist/dom-mini.js +1 -1
- package/dist/dom.js +1 -1
- package/dist/es/animation/animators/MainThreadAnimation.mjs +4 -3
- package/dist/es/gestures/drag/VisualElementDragControls.mjs +9 -11
- package/dist/es/gestures/pan/PanSession.mjs +27 -8
- package/dist/es/gestures/pan/index.mjs +2 -4
- package/dist/es/render/utils/motion-values.mjs +1 -1
- package/dist/es/value/index.mjs +1 -1
- package/dist/framer-motion.dev.js +99 -46
- package/dist/framer-motion.js +1 -1
- package/dist/m.d.ts +1 -1
- package/dist/mini.js +1 -1
- package/dist/types/client.d.ts +1 -1
- package/dist/types/index.d.ts +4 -4
- package/package.json +3 -3
- package/dist/es/utils/get-context-window.mjs +0 -6
package/dist/cjs/client.js
CHANGED
|
@@ -410,7 +410,7 @@ class MotionValue {
|
|
|
410
410
|
* This will be replaced by the build step with the latest version number.
|
|
411
411
|
* When MotionValues are provided to motion components, warn if versions are mixed.
|
|
412
412
|
*/
|
|
413
|
-
this.version = "12.4.
|
|
413
|
+
this.version = "12.4.4-alpha.0";
|
|
414
414
|
/**
|
|
415
415
|
* Tracks whether this value can output a velocity. Currently this is only true
|
|
416
416
|
* if the value is numerical, but we might be able to widen the scope here and support
|
|
@@ -2687,11 +2687,12 @@ class MainThreadAnimation extends BaseAnimation {
|
|
|
2687
2687
|
*/
|
|
2688
2688
|
let mapPercentToKeyframes;
|
|
2689
2689
|
let mirroredGenerator;
|
|
2690
|
+
if (process.env.NODE_ENV !== "production" &&
|
|
2691
|
+
generatorFactory !== keyframes) {
|
|
2692
|
+
motionUtils.invariant(keyframes$1.length <= 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${keyframes$1}`);
|
|
2693
|
+
}
|
|
2690
2694
|
if (generatorFactory !== keyframes &&
|
|
2691
2695
|
typeof keyframes$1[0] !== "number") {
|
|
2692
|
-
if (process.env.NODE_ENV !== "production") {
|
|
2693
|
-
motionUtils.invariant(keyframes$1.length === 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${keyframes$1}`);
|
|
2694
|
-
}
|
|
2695
2696
|
mapPercentToKeyframes = pipe(percentToProgress, mix(keyframes$1[0], keyframes$1[1]));
|
|
2696
2697
|
keyframes$1 = [0, 100];
|
|
2697
2698
|
}
|
|
@@ -4568,7 +4569,7 @@ function updateMotionValuesFromProps(element, next, prev) {
|
|
|
4568
4569
|
* and warn against mismatches.
|
|
4569
4570
|
*/
|
|
4570
4571
|
if (process.env.NODE_ENV === "development") {
|
|
4571
|
-
warnOnce(nextValue.version === "12.4.
|
|
4572
|
+
warnOnce(nextValue.version === "12.4.4-alpha.0", `Attempting to mix Motion versions ${nextValue.version} with 12.4.4-alpha.0 may not work as expected.`);
|
|
4572
4573
|
}
|
|
4573
4574
|
}
|
|
4574
4575
|
else if (isMotionValue(prevValue)) {
|
|
@@ -7758,11 +7759,17 @@ function loadFeatures(features) {
|
|
|
7758
7759
|
}
|
|
7759
7760
|
}
|
|
7760
7761
|
|
|
7762
|
+
function isRefObject(ref) {
|
|
7763
|
+
return (ref &&
|
|
7764
|
+
typeof ref === "object" &&
|
|
7765
|
+
Object.prototype.hasOwnProperty.call(ref, "current"));
|
|
7766
|
+
}
|
|
7767
|
+
|
|
7761
7768
|
/**
|
|
7762
7769
|
* @internal
|
|
7763
7770
|
*/
|
|
7764
7771
|
class PanSession {
|
|
7765
|
-
constructor(event, handlers, { transformPagePoint,
|
|
7772
|
+
constructor(event, handlers, { transformPagePoint, dragSnapToOrigin = false } = {}) {
|
|
7766
7773
|
/**
|
|
7767
7774
|
* @internal
|
|
7768
7775
|
*/
|
|
@@ -7779,10 +7786,6 @@ class PanSession {
|
|
|
7779
7786
|
* @internal
|
|
7780
7787
|
*/
|
|
7781
7788
|
this.handlers = {};
|
|
7782
|
-
/**
|
|
7783
|
-
* @internal
|
|
7784
|
-
*/
|
|
7785
|
-
this.contextWindow = window;
|
|
7786
7789
|
this.updatePoint = () => {
|
|
7787
7790
|
if (!(this.lastMoveEvent && this.lastMoveEventInfo))
|
|
7788
7791
|
return;
|
|
@@ -7805,19 +7808,31 @@ class PanSession {
|
|
|
7805
7808
|
onMove && onMove(this.lastMoveEvent, info);
|
|
7806
7809
|
};
|
|
7807
7810
|
this.handlePointerMove = (event, info) => {
|
|
7811
|
+
if (event.currentTarget instanceof Element &&
|
|
7812
|
+
event.currentTarget.hasPointerCapture &&
|
|
7813
|
+
event.pointerId !== undefined) {
|
|
7814
|
+
try {
|
|
7815
|
+
if (!event.currentTarget.hasPointerCapture(event.pointerId)) {
|
|
7816
|
+
return;
|
|
7817
|
+
}
|
|
7818
|
+
}
|
|
7819
|
+
catch (e) { }
|
|
7820
|
+
}
|
|
7808
7821
|
this.lastMoveEvent = event;
|
|
7809
7822
|
this.lastMoveEventInfo = transformPoint(info, this.transformPagePoint);
|
|
7810
7823
|
// Throttle mouse move event to once per frame
|
|
7811
7824
|
frame.update(this.updatePoint, true);
|
|
7812
7825
|
};
|
|
7813
7826
|
this.handlePointerUp = (event, info) => {
|
|
7827
|
+
capturePointer(event, "release");
|
|
7814
7828
|
this.end();
|
|
7815
7829
|
const { onEnd, onSessionEnd, resumeAnimation } = this.handlers;
|
|
7816
7830
|
if (this.dragSnapToOrigin)
|
|
7817
7831
|
resumeAnimation && resumeAnimation();
|
|
7818
7832
|
if (!(this.lastMoveEvent && this.lastMoveEventInfo))
|
|
7819
7833
|
return;
|
|
7820
|
-
const panInfo = getPanInfo(event.type === "pointercancel"
|
|
7834
|
+
const panInfo = getPanInfo(event.type === "pointercancel" ||
|
|
7835
|
+
event.type === "lostpointercapture"
|
|
7821
7836
|
? this.lastMoveEventInfo
|
|
7822
7837
|
: transformPoint(info, this.transformPagePoint), this.history);
|
|
7823
7838
|
if (this.startEvent && onEnd) {
|
|
@@ -7831,7 +7846,6 @@ class PanSession {
|
|
|
7831
7846
|
this.dragSnapToOrigin = dragSnapToOrigin;
|
|
7832
7847
|
this.handlers = handlers;
|
|
7833
7848
|
this.transformPagePoint = transformPagePoint;
|
|
7834
|
-
this.contextWindow = contextWindow || window;
|
|
7835
7849
|
const info = extractEventInfo(event);
|
|
7836
7850
|
const initialInfo = transformPoint(info, this.transformPagePoint);
|
|
7837
7851
|
const { point } = initialInfo;
|
|
@@ -7840,7 +7854,8 @@ class PanSession {
|
|
|
7840
7854
|
const { onSessionStart } = handlers;
|
|
7841
7855
|
onSessionStart &&
|
|
7842
7856
|
onSessionStart(event, getPanInfo(initialInfo, this.history));
|
|
7843
|
-
|
|
7857
|
+
capturePointer(event, "set");
|
|
7858
|
+
this.removeListeners = pipe(addPointerEvent(event.currentTarget, "pointermove", this.handlePointerMove), addPointerEvent(event.currentTarget, "pointerup", this.handlePointerUp), addPointerEvent(event.currentTarget, "pointercancel", this.handlePointerUp), addPointerEvent(event.currentTarget, "lostpointercapture", this.handlePointerUp));
|
|
7844
7859
|
}
|
|
7845
7860
|
updateHandlers(handlers) {
|
|
7846
7861
|
this.handlers = handlers;
|
|
@@ -7904,11 +7919,16 @@ function getVelocity(history, timeDelta) {
|
|
|
7904
7919
|
}
|
|
7905
7920
|
return currentVelocity;
|
|
7906
7921
|
}
|
|
7907
|
-
|
|
7908
|
-
|
|
7909
|
-
|
|
7910
|
-
|
|
7911
|
-
|
|
7922
|
+
function capturePointer(event, action) {
|
|
7923
|
+
const actionName = `${action}PointerCapture`;
|
|
7924
|
+
if (event.currentTarget instanceof Element &&
|
|
7925
|
+
actionName in event.currentTarget &&
|
|
7926
|
+
event.pointerId !== undefined) {
|
|
7927
|
+
try {
|
|
7928
|
+
event.currentTarget[actionName](event.pointerId);
|
|
7929
|
+
}
|
|
7930
|
+
catch (e) { }
|
|
7931
|
+
}
|
|
7912
7932
|
}
|
|
7913
7933
|
|
|
7914
7934
|
/**
|
|
@@ -8034,11 +8054,6 @@ function resolvePointElastic(dragElastic, label) {
|
|
|
8034
8054
|
: dragElastic[label] || 0;
|
|
8035
8055
|
}
|
|
8036
8056
|
|
|
8037
|
-
// Fixes https://github.com/motiondivision/motion/issues/2270
|
|
8038
|
-
const getContextWindow = ({ current }) => {
|
|
8039
|
-
return current ? current.ownerDocument.defaultView : null;
|
|
8040
|
-
};
|
|
8041
|
-
|
|
8042
8057
|
const elementDragControls = new WeakMap();
|
|
8043
8058
|
/**
|
|
8044
8059
|
*
|
|
@@ -8171,7 +8186,6 @@ class VisualElementDragControls {
|
|
|
8171
8186
|
}, {
|
|
8172
8187
|
transformPagePoint: this.visualElement.getTransformPagePoint(),
|
|
8173
8188
|
dragSnapToOrigin,
|
|
8174
|
-
contextWindow: getContextWindow(this.visualElement),
|
|
8175
8189
|
});
|
|
8176
8190
|
}
|
|
8177
8191
|
stop(event, info) {
|
|
@@ -8537,7 +8551,6 @@ class PanGesture extends Feature {
|
|
|
8537
8551
|
onPointerDown(pointerDownEvent) {
|
|
8538
8552
|
this.session = new PanSession(pointerDownEvent, this.createPanHandlers(), {
|
|
8539
8553
|
transformPagePoint: this.node.getTransformPagePoint(),
|
|
8540
|
-
contextWindow: getContextWindow(this.node),
|
|
8541
8554
|
});
|
|
8542
8555
|
}
|
|
8543
8556
|
createPanHandlers() {
|
package/dist/cjs/dom.js
CHANGED
|
@@ -1011,7 +1011,7 @@ class MotionValue {
|
|
|
1011
1011
|
* This will be replaced by the build step with the latest version number.
|
|
1012
1012
|
* When MotionValues are provided to motion components, warn if versions are mixed.
|
|
1013
1013
|
*/
|
|
1014
|
-
this.version = "12.4.
|
|
1014
|
+
this.version = "12.4.4-alpha.0";
|
|
1015
1015
|
/**
|
|
1016
1016
|
* Tracks whether this value can output a velocity. Currently this is only true
|
|
1017
1017
|
* if the value is numerical, but we might be able to widen the scope here and support
|
|
@@ -2998,11 +2998,12 @@ class MainThreadAnimation extends BaseAnimation {
|
|
|
2998
2998
|
*/
|
|
2999
2999
|
let mapPercentToKeyframes;
|
|
3000
3000
|
let mirroredGenerator;
|
|
3001
|
+
if (process.env.NODE_ENV !== "production" &&
|
|
3002
|
+
generatorFactory !== keyframes) {
|
|
3003
|
+
motionUtils.invariant(keyframes$1.length <= 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${keyframes$1}`);
|
|
3004
|
+
}
|
|
3001
3005
|
if (generatorFactory !== keyframes &&
|
|
3002
3006
|
typeof keyframes$1[0] !== "number") {
|
|
3003
|
-
if (process.env.NODE_ENV !== "production") {
|
|
3004
|
-
motionUtils.invariant(keyframes$1.length === 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${keyframes$1}`);
|
|
3005
|
-
}
|
|
3006
3007
|
mapPercentToKeyframes = pipe(percentToProgress, mix(keyframes$1[0], keyframes$1[1]));
|
|
3007
3008
|
keyframes$1 = [0, 100];
|
|
3008
3009
|
}
|
|
@@ -3946,7 +3947,7 @@ function updateMotionValuesFromProps(element, next, prev) {
|
|
|
3946
3947
|
* and warn against mismatches.
|
|
3947
3948
|
*/
|
|
3948
3949
|
if (process.env.NODE_ENV === "development") {
|
|
3949
|
-
warnOnce(nextValue.version === "12.4.
|
|
3950
|
+
warnOnce(nextValue.version === "12.4.4-alpha.0", `Attempting to mix Motion versions ${nextValue.version} with 12.4.4-alpha.0 may not work as expected.`);
|
|
3950
3951
|
}
|
|
3951
3952
|
}
|
|
3952
3953
|
else if (isMotionValue(prevValue)) {
|
package/dist/cjs/index.js
CHANGED
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var React = require('react');
|
|
7
|
-
var create = require('./create-
|
|
7
|
+
var create = require('./create-Cxf19Y4j.js');
|
|
8
8
|
var motionUtils = require('motion-utils');
|
|
9
9
|
var motionDom = require('motion-dom');
|
|
10
10
|
|
package/dist/dom-mini.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Motion={})}(this,(function(t){"use strict";const e=t=>t;let n=e;function i(t){let e;return()=>(void 0===e&&(e=t()),e)}const a=(t,e,n)=>{const i=e-t;return 0===i?1:(n-t)/i},s=t=>1e3*t,o=t=>t/1e3,r=i(()=>void 0!==window.ScrollTimeline);class u extends class{constructor(t){this.stop=()=>this.runAll("stop"),this.animations=t.filter(Boolean)}get finished(){return Promise.all(this.animations.map(t=>"finished"in t?t.finished:t))}getAll(t){return this.animations[0][t]}setAll(t,e){for(let n=0;n<this.animations.length;n++)this.animations[n][t]=e}attachTimeline(t,e){const n=this.animations.map(n=>r()&&n.attachTimeline?n.attachTimeline(t):"function"==typeof e?e(n):void 0);return()=>{n.forEach((t,e)=>{t&&t(),this.animations[e].stop()})}}get time(){return this.getAll("time")}set time(t){this.setAll("time",t)}get speed(){return this.getAll("speed")}set speed(t){this.setAll("speed",t)}get startTime(){return this.getAll("startTime")}get duration(){let t=0;for(let e=0;e<this.animations.length;e++)t=Math.max(t,this.animations[e].duration);return t}runAll(t){this.animations.forEach(e=>e[t]())}flatten(){this.runAll("flatten")}play(){this.runAll("play")}pause(){this.runAll("pause")}cancel(){this.runAll("cancel")}complete(){this.runAll("complete")}}{then(t,e){return Promise.all(this.animations).then(t).catch(e)}}function l(t,e=100,n){const i=n({...t,keyframes:[0,e]}),a=Math.min(function(t){let e=0,n=t.next(e);for(;!n.done&&e<2e4;)e+=50,n=t.next(e);return e>=2e4?1/0:e}(i),2e4);return{type:"keyframes",ease:t=>i.next(a*t).value/e,duration:o(a)}}function c(t){return"function"==typeof t}const h={linearEasing:void 0};function f(t,e){const n=i(t);return()=>{var t;return null!==(t=h[e])&&void 0!==t?t:n()}}const m=f(()=>{try{document.createElement("div").animate({opacity:0},{easing:"linear(0, 1)"})}catch(t){return!1}return!0},"linearEasing"),d=([t,e,n,i])=>`cubic-bezier(${t}, ${e}, ${n}, ${i})`,p={linear:"linear",ease:"ease",easeIn:"ease-in",easeOut:"ease-out",easeInOut:"ease-in-out",circIn:d([0,.65,.55,1]),circOut:d([.55,0,1,.45]),backIn:d([.31,.01,.66,-.59]),backOut:d([.33,1.53,.69,.99])};function y(t,e){return t?"function"==typeof t&&m()?((t,e,n=10)=>{let i="";const s=Math.max(Math.round(e/n),2);for(let e=0;e<s;e++)i+=t(a(0,s-1,e))+", ";return`linear(${i.substring(0,i.length-2)})`})(t,e):(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?d(t):Array.isArray(t)?t.map(t=>y(t,e)||p.easeOut):p[t]:void 0}function g(t,e,n){var i;if(t instanceof Element)return[t];if("string"==typeof t){let a=document;e&&(a=e.current);const s=null!==(i=null==n?void 0:n[t])&&void 0!==i?i:a.querySelectorAll(t);return s?Array.from(s):[]}return Array.from(t)}function v(t,e){return n=t,Array.isArray(n)&&"number"!=typeof n[0]?t[((t,e,n)=>{const i=e-t;return((n-t)%i+i)%i+t})(0,t.length,e)]:t;var n}const A=(t,e,n)=>t+(e-t)*n;function b(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const s=a(0,e,i);t.push(A(n,1,s))}}function T(t){const e=[0];return b(e,t.length-1),e}function x(t,e,n,i){return"string"==typeof t&&function(t){return"object"==typeof t&&!Array.isArray(t)}(e)?g(t,n,i):t instanceof NodeList?Array.from(t):Array.isArray(t)?t:[t]}function P(t,e,n){return t*(e+1)}function w(t,e,n,i){var a;return"number"==typeof e?e:e.startsWith("-")||e.startsWith("+")?Math.max(0,t+parseFloat(e)):"<"===e?n:null!==(a=i.get(e))&&void 0!==a?a:t}function k(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}function M(t,e,n,i,a,s){!function(t,e,n){for(let i=0;i<t.length;i++){const a=t[i];a.at>e&&a.at<n&&(k(t,a),i--)}}(t,a,s);for(let o=0;o<e.length;o++)t.push({value:e[o],at:A(a,s,i[o]),easing:v(n,o)})}function O(t,e){for(let n=0;n<t.length;n++)t[n]=t[n]/(e+1)}function R(t,e){return t.at===e.at?null===t.value?1:null===e.value?-1:0:t.at-e.at}function W(t,e){return!e.has(t)&&e.set(t,{}),e.get(t)}function E(t,e){return e[t]||(e[t]=[]),e[t]}function F(t){return Array.isArray(t)?t:[t]}function B(t,e){return t&&t[e]?{...t,...t[e]}:{...t}}const S=t=>"number"==typeof t,$=t=>t.every(S);const I=(t=>({test:e=>"string"==typeof e&&e.endsWith(t)&&1===e.split(" ").length,parse:parseFloat,transform:e=>`${e}${t}`}))("px"),L={borderWidth:I,borderTopWidth:I,borderRightWidth:I,borderBottomWidth:I,borderLeftWidth:I,borderRadius:I,radius:I,borderTopLeftRadius:I,borderTopRightRadius:I,borderBottomRightRadius:I,borderBottomLeftRadius:I,width:I,maxWidth:I,height:I,maxHeight:I,top:I,right:I,bottom:I,left:I,padding:I,paddingTop:I,paddingRight:I,paddingBottom:I,paddingLeft:I,margin:I,marginTop:I,marginRight:I,marginBottom:I,marginLeft:I,backgroundPositionX:I,backgroundPositionY:I},V=t=>null!==t;function j(t,e,n){t.style.setProperty(e,n)}function q(t,e,n){t.style[e]=n}const C=i(()=>{try{document.createElement("div").animate({opacity:[1]})}catch(t){return!1}return!0}),N=i(()=>Object.hasOwnProperty.call(Element.prototype,"animate")),z=new WeakMap;function D(t){const e=z.get(t)||new Map;return z.set(t,e),z.get(t)}class H extends class{constructor(t){this.animation=t}get duration(){var t,e,n;const i=(null===(e=null===(t=this.animation)||void 0===t?void 0:t.effect)||void 0===e?void 0:e.getComputedTiming().duration)||(null===(n=this.options)||void 0===n?void 0:n.duration)||300;return o(Number(i))}get time(){var t;return this.animation?o((null===(t=this.animation)||void 0===t?void 0:t.currentTime)||0):0}set time(t){this.animation&&(this.animation.currentTime=s(t))}get speed(){return this.animation?this.animation.playbackRate:1}set speed(t){this.animation&&(this.animation.playbackRate=t)}get state(){return this.animation?this.animation.playState:"finished"}get startTime(){return this.animation?this.animation.startTime:null}get finished(){return this.animation?this.animation.finished:Promise.resolve()}play(){this.animation&&this.animation.play()}pause(){this.animation&&this.animation.pause()}stop(){this.animation&&"idle"!==this.state&&"finished"!==this.state&&(this.animation.commitStyles&&this.animation.commitStyles(),this.cancel())}flatten(){var t;this.animation&&(null===(t=this.animation.effect)||void 0===t||t.updateTiming({easing:"linear"}))}attachTimeline(t){return this.animation&&function(t,e){t.timeline=e,t.onfinish=null}(this.animation,t),e}complete(){this.animation&&this.animation.finish()}cancel(){try{this.animation&&this.animation.cancel()}catch(t){}}}{constructor(t,e,i,a){const o=e.startsWith("--");n("string"!=typeof a.type);const r=D(t).get(e);r&&r.stop();if(Array.isArray(i)||(i=[i]),function(t,e,n){for(let i=0;i<e.length;i++)null===e[i]&&(e[i]=0===i?n():e[i-1]),"number"==typeof e[i]&&L[t]&&(e[i]=L[t].transform(e[i]));!C()&&e.length<2&&e.unshift(n())}(e,i,()=>e.startsWith("--")?t.style.getPropertyValue(e):window.getComputedStyle(t)[e]),c(a.type)){const t=l(a,100,a.type);a.ease=m()?t.ease:"easeOut",a.duration=s(t.duration),a.type="keyframes"}else a.ease=a.ease||"easeOut";const u=()=>{this.setValue(t,e,function(t,{repeat:e,repeatType:n="loop"},i){const a=t.filter(V),s=e&&"loop"!==n&&e%2==1?0:a.length-1;return s&&void 0!==i?i:a[s]}(i,a)),this.cancel(),this.resolveFinishedPromise()},h=()=>{this.setValue=o?j:q,this.options=a,this.updateFinishedPromise(),this.removeAnimation=()=>{const n=z.get(t);n&&n.delete(e)}};N()?(super(function(t,e,n,{delay:i=0,duration:a=300,repeat:s=0,repeatType:o="loop",ease:r="easeInOut",times:u}={}){const l={[e]:n};u&&(l.offset=u);const c=y(r,a);return Array.isArray(c)&&(l.easing=c),t.animate(l,{delay:i,duration:a,easing:Array.isArray(c)?"linear":c,fill:"both",iterations:s+1,direction:"reverse"===o?"alternate":"normal"})}(t,e,i,a)),h(),!1===a.autoplay&&this.animation.pause(),this.animation.onfinish=u,D(t).set(e,this)):(super(),h(),u())}then(t,e){return this.currentFinishedPromise.then(t,e)}updateFinishedPromise(){this.currentFinishedPromise=new Promise(t=>{this.resolveFinishedPromise=t})}play(){"finished"===this.state&&this.updateFinishedPromise(),super.play()}cancel(){this.removeAnimation(),super.cancel()}}function X(t,e,n,i){const a=g(t,i),o=a.length,r=[];for(let t=0;t<o;t++){const i=a[t],c={...n};"function"==typeof c.delay&&(c.delay=c.delay(t,o));for(const t in e){const n=e[t],a={...(u=c,l=t,u?u[l]||u.default||u:void 0)};a.duration=a.duration?s(a.duration):a.duration,a.delay=s(a.delay||0),r.push(new H(i,t,n,a))}}var u,l;return r}const Y=(t=>function(e,n,i){return new u(X(e,n,i,t))})();t.animate=Y,t.animateSequence=function(t,e){const n=[];return function(t,{defaultTransition:e={},...n}={},i,o){const r=e.duration||.3,u=new Map,h=new Map,f={},m=new Map;let d=0,p=0,y=0;for(let n=0;n<t.length;n++){const a=t[n];if("string"==typeof a){m.set(a,p);continue}if(!Array.isArray(a)){m.set(a.name,w(p,a.at,d,m));continue}let[u,A,k={}]=a;void 0!==k.at&&(p=w(p,k.at,d,m));let R=0;const S=(t,n,i,a=0,u=0)=>{const h=F(t),{delay:f=0,times:m=T(h),type:d="keyframes",repeat:g,repeatType:A,repeatDelay:x=0,...w}=n;let{ease:k=e.ease||"easeOut",duration:W}=n;const E="function"==typeof f?f(a,u):f,B=h.length,S=c(d)?d:null==o?void 0:o[d];if(B<=2&&S){let t=100;if(2===B&&$(h)){const e=h[1]-h[0];t=Math.abs(e)}const e={...w};void 0!==W&&(e.duration=s(W));const n=l(e,t,S);k=n.ease,W=n.duration}null!=W||(W=r);const I=p+E;1===m.length&&0===m[0]&&(m[1]=1);const L=m.length-h.length;if(L>0&&b(m,L),1===h.length&&h.unshift(null),g){W=P(W,g);const t=[...h],e=[...m];k=Array.isArray(k)?[...k]:[k];const n=[...k];for(let i=0;i<g;i++){h.push(...t);for(let a=0;a<t.length;a++)m.push(e[a]+(i+1)),k.push(0===a?"linear":v(n,a-1))}O(m,g)}const V=I+W;M(i,h,k,m,I,V),R=Math.max(E+W,R),y=Math.max(V,y)};if(g=u,Boolean(g&&g.getVelocity)){S(A,k,E("default",W(u,h)))}else{const t=x(u,A,i,f),e=t.length;for(let n=0;n<e;n++){A=A,k=k;const i=W(t[n],h);for(const t in A)S(A[t],B(k,t),E(t,i),n,e)}}d=p,p+=R}var g;return h.forEach((t,i)=>{for(const s in t){const o=t[s];o.sort(R);const r=[],l=[],c=[];for(let t=0;t<o.length;t++){const{at:e,value:n,easing:i}=o[t];r.push(n),l.push(a(0,y,e)),c.push(i||"easeOut")}0!==l[0]&&(l.unshift(0),r.unshift(r[0]),c.unshift("easeInOut")),1!==l[l.length-1]&&(l.push(1),r.push(null)),u.has(i)||u.set(i,{keyframes:{},transition:{}});const h=u.get(i);h.keyframes[s]=r,h.transition[s]={...e,duration:y,ease:c,times:l,...n}}}),u}(t,e).forEach(({keyframes:t,transition:e},i)=>{n.push(...X(i,t,e))}),new u(n)}}));
|
|
1
|
+
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Motion={})}(this,(function(t){"use strict";const e=t=>t;let n=e;function i(t){let e;return()=>(void 0===e&&(e=t()),e)}const a=(t,e,n)=>{const i=e-t;return 0===i?1:(n-t)/i},s=t=>1e3*t,o=t=>t/1e3,r=i(()=>void 0!==window.ScrollTimeline);class u extends class{constructor(t){this.stop=()=>this.runAll("stop"),this.animations=t.filter(Boolean)}get finished(){return Promise.all(this.animations.map(t=>"finished"in t?t.finished:t))}getAll(t){return this.animations[0][t]}setAll(t,e){for(let n=0;n<this.animations.length;n++)this.animations[n][t]=e}attachTimeline(t,e){const n=this.animations.map(n=>r()&&n.attachTimeline?n.attachTimeline(t):"function"==typeof e?e(n):void 0);return()=>{n.forEach((t,e)=>{t&&t(),this.animations[e].stop()})}}get time(){return this.getAll("time")}set time(t){this.setAll("time",t)}get speed(){return this.getAll("speed")}set speed(t){this.setAll("speed",t)}get startTime(){return this.getAll("startTime")}get duration(){let t=0;for(let e=0;e<this.animations.length;e++)t=Math.max(t,this.animations[e].duration);return t}runAll(t){this.animations.forEach(e=>e[t]())}flatten(){this.runAll("flatten")}play(){this.runAll("play")}pause(){this.runAll("pause")}cancel(){this.runAll("cancel")}complete(){this.runAll("complete")}}{then(t,e){return Promise.all(this.animations).then(t).catch(e)}}function l(t,e=100,n){const i=n({...t,keyframes:[0,e]}),a=Math.min(function(t){let e=0,n=t.next(e);for(;!n.done&&e<2e4;)e+=50,n=t.next(e);return e>=2e4?1/0:e}(i),2e4);return{type:"keyframes",ease:t=>i.next(a*t).value/e,duration:o(a)}}function c(t){return"function"==typeof t}const h={linearEasing:void 0};function f(t,e){const n=i(t);return()=>{var t;return null!==(t=h[e])&&void 0!==t?t:n()}}const m=f(()=>{try{document.createElement("div").animate({opacity:0},{easing:"linear(0, 1)"})}catch(t){return!1}return!0},"linearEasing"),d=([t,e,n,i])=>`cubic-bezier(${t}, ${e}, ${n}, ${i})`,p={linear:"linear",ease:"ease",easeIn:"ease-in",easeOut:"ease-out",easeInOut:"ease-in-out",circIn:d([0,.65,.55,1]),circOut:d([.55,0,1,.45]),backIn:d([.31,.01,.66,-.59]),backOut:d([.33,1.53,.69,.99])};function y(t,e){return t?"function"==typeof t&&m()?((t,e,n=10)=>{let i="";const s=Math.max(Math.round(e/n),2);for(let e=0;e<s;e++)i+=t(a(0,s-1,e))+", ";return`linear(${i.substring(0,i.length-2)})`})(t,e):(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?d(t):Array.isArray(t)?t.map(t=>y(t,e)||p.easeOut):p[t]:void 0}function g(t,e,n){var i;if(t instanceof EventTarget)return[t];if("string"==typeof t){let a=document;e&&(a=e.current);const s=null!==(i=null==n?void 0:n[t])&&void 0!==i?i:a.querySelectorAll(t);return s?Array.from(s):[]}return Array.from(t)}function v(t,e){return n=t,Array.isArray(n)&&"number"!=typeof n[0]?t[((t,e,n)=>{const i=e-t;return((n-t)%i+i)%i+t})(0,t.length,e)]:t;var n}const A=(t,e,n)=>t+(e-t)*n;function b(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const s=a(0,e,i);t.push(A(n,1,s))}}function T(t){const e=[0];return b(e,t.length-1),e}function x(t,e,n,i){return"string"==typeof t&&function(t){return"object"==typeof t&&!Array.isArray(t)}(e)?g(t,n,i):t instanceof NodeList?Array.from(t):Array.isArray(t)?t:[t]}function P(t,e,n){return t*(e+1)}function w(t,e,n,i){var a;return"number"==typeof e?e:e.startsWith("-")||e.startsWith("+")?Math.max(0,t+parseFloat(e)):"<"===e?n:null!==(a=i.get(e))&&void 0!==a?a:t}function k(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}function M(t,e,n,i,a,s){!function(t,e,n){for(let i=0;i<t.length;i++){const a=t[i];a.at>e&&a.at<n&&(k(t,a),i--)}}(t,a,s);for(let o=0;o<e.length;o++)t.push({value:e[o],at:A(a,s,i[o]),easing:v(n,o)})}function O(t,e){for(let n=0;n<t.length;n++)t[n]=t[n]/(e+1)}function R(t,e){return t.at===e.at?null===t.value?1:null===e.value?-1:0:t.at-e.at}function W(t,e){return!e.has(t)&&e.set(t,{}),e.get(t)}function E(t,e){return e[t]||(e[t]=[]),e[t]}function F(t){return Array.isArray(t)?t:[t]}function B(t,e){return t&&t[e]?{...t,...t[e]}:{...t}}const S=t=>"number"==typeof t,$=t=>t.every(S);const I=(t=>({test:e=>"string"==typeof e&&e.endsWith(t)&&1===e.split(" ").length,parse:parseFloat,transform:e=>`${e}${t}`}))("px"),L={borderWidth:I,borderTopWidth:I,borderRightWidth:I,borderBottomWidth:I,borderLeftWidth:I,borderRadius:I,radius:I,borderTopLeftRadius:I,borderTopRightRadius:I,borderBottomRightRadius:I,borderBottomLeftRadius:I,width:I,maxWidth:I,height:I,maxHeight:I,top:I,right:I,bottom:I,left:I,padding:I,paddingTop:I,paddingRight:I,paddingBottom:I,paddingLeft:I,margin:I,marginTop:I,marginRight:I,marginBottom:I,marginLeft:I,backgroundPositionX:I,backgroundPositionY:I},V=t=>null!==t;function j(t,e,n){t.style.setProperty(e,n)}function q(t,e,n){t.style[e]=n}const C=i(()=>{try{document.createElement("div").animate({opacity:[1]})}catch(t){return!1}return!0}),N=i(()=>Object.hasOwnProperty.call(Element.prototype,"animate")),z=new WeakMap;function D(t){const e=z.get(t)||new Map;return z.set(t,e),z.get(t)}class H extends class{constructor(t){this.animation=t}get duration(){var t,e,n;const i=(null===(e=null===(t=this.animation)||void 0===t?void 0:t.effect)||void 0===e?void 0:e.getComputedTiming().duration)||(null===(n=this.options)||void 0===n?void 0:n.duration)||300;return o(Number(i))}get time(){var t;return this.animation?o((null===(t=this.animation)||void 0===t?void 0:t.currentTime)||0):0}set time(t){this.animation&&(this.animation.currentTime=s(t))}get speed(){return this.animation?this.animation.playbackRate:1}set speed(t){this.animation&&(this.animation.playbackRate=t)}get state(){return this.animation?this.animation.playState:"finished"}get startTime(){return this.animation?this.animation.startTime:null}get finished(){return this.animation?this.animation.finished:Promise.resolve()}play(){this.animation&&this.animation.play()}pause(){this.animation&&this.animation.pause()}stop(){this.animation&&"idle"!==this.state&&"finished"!==this.state&&(this.animation.commitStyles&&this.animation.commitStyles(),this.cancel())}flatten(){var t;this.animation&&(null===(t=this.animation.effect)||void 0===t||t.updateTiming({easing:"linear"}))}attachTimeline(t){return this.animation&&function(t,e){t.timeline=e,t.onfinish=null}(this.animation,t),e}complete(){this.animation&&this.animation.finish()}cancel(){try{this.animation&&this.animation.cancel()}catch(t){}}}{constructor(t,e,i,a){const o=e.startsWith("--");n("string"!=typeof a.type);const r=D(t).get(e);r&&r.stop();if(Array.isArray(i)||(i=[i]),function(t,e,n){for(let i=0;i<e.length;i++)null===e[i]&&(e[i]=0===i?n():e[i-1]),"number"==typeof e[i]&&L[t]&&(e[i]=L[t].transform(e[i]));!C()&&e.length<2&&e.unshift(n())}(e,i,()=>e.startsWith("--")?t.style.getPropertyValue(e):window.getComputedStyle(t)[e]),c(a.type)){const t=l(a,100,a.type);a.ease=m()?t.ease:"easeOut",a.duration=s(t.duration),a.type="keyframes"}else a.ease=a.ease||"easeOut";const u=()=>{this.setValue(t,e,function(t,{repeat:e,repeatType:n="loop"},i){const a=t.filter(V),s=e&&"loop"!==n&&e%2==1?0:a.length-1;return s&&void 0!==i?i:a[s]}(i,a)),this.cancel(),this.resolveFinishedPromise()},h=()=>{this.setValue=o?j:q,this.options=a,this.updateFinishedPromise(),this.removeAnimation=()=>{const n=z.get(t);n&&n.delete(e)}};N()?(super(function(t,e,n,{delay:i=0,duration:a=300,repeat:s=0,repeatType:o="loop",ease:r="easeInOut",times:u}={}){const l={[e]:n};u&&(l.offset=u);const c=y(r,a);return Array.isArray(c)&&(l.easing=c),t.animate(l,{delay:i,duration:a,easing:Array.isArray(c)?"linear":c,fill:"both",iterations:s+1,direction:"reverse"===o?"alternate":"normal"})}(t,e,i,a)),h(),!1===a.autoplay&&this.animation.pause(),this.animation.onfinish=u,D(t).set(e,this)):(super(),h(),u())}then(t,e){return this.currentFinishedPromise.then(t,e)}updateFinishedPromise(){this.currentFinishedPromise=new Promise(t=>{this.resolveFinishedPromise=t})}play(){"finished"===this.state&&this.updateFinishedPromise(),super.play()}cancel(){this.removeAnimation(),super.cancel()}}function X(t,e,n,i){const a=g(t,i),o=a.length,r=[];for(let t=0;t<o;t++){const i=a[t],c={...n};"function"==typeof c.delay&&(c.delay=c.delay(t,o));for(const t in e){const n=e[t],a={...(u=c,l=t,u?u[l]||u.default||u:void 0)};a.duration=a.duration?s(a.duration):a.duration,a.delay=s(a.delay||0),r.push(new H(i,t,n,a))}}var u,l;return r}const Y=(t=>function(e,n,i){return new u(X(e,n,i,t))})();t.animate=Y,t.animateSequence=function(t,e){const n=[];return function(t,{defaultTransition:e={},...n}={},i,o){const r=e.duration||.3,u=new Map,h=new Map,f={},m=new Map;let d=0,p=0,y=0;for(let n=0;n<t.length;n++){const a=t[n];if("string"==typeof a){m.set(a,p);continue}if(!Array.isArray(a)){m.set(a.name,w(p,a.at,d,m));continue}let[u,A,k={}]=a;void 0!==k.at&&(p=w(p,k.at,d,m));let R=0;const S=(t,n,i,a=0,u=0)=>{const h=F(t),{delay:f=0,times:m=T(h),type:d="keyframes",repeat:g,repeatType:A,repeatDelay:x=0,...w}=n;let{ease:k=e.ease||"easeOut",duration:W}=n;const E="function"==typeof f?f(a,u):f,B=h.length,S=c(d)?d:null==o?void 0:o[d];if(B<=2&&S){let t=100;if(2===B&&$(h)){const e=h[1]-h[0];t=Math.abs(e)}const e={...w};void 0!==W&&(e.duration=s(W));const n=l(e,t,S);k=n.ease,W=n.duration}null!=W||(W=r);const I=p+E;1===m.length&&0===m[0]&&(m[1]=1);const L=m.length-h.length;if(L>0&&b(m,L),1===h.length&&h.unshift(null),g){W=P(W,g);const t=[...h],e=[...m];k=Array.isArray(k)?[...k]:[k];const n=[...k];for(let i=0;i<g;i++){h.push(...t);for(let a=0;a<t.length;a++)m.push(e[a]+(i+1)),k.push(0===a?"linear":v(n,a-1))}O(m,g)}const V=I+W;M(i,h,k,m,I,V),R=Math.max(E+W,R),y=Math.max(V,y)};if(g=u,Boolean(g&&g.getVelocity)){S(A,k,E("default",W(u,h)))}else{const t=x(u,A,i,f),e=t.length;for(let n=0;n<e;n++){A=A,k=k;const i=W(t[n],h);for(const t in A)S(A[t],B(k,t),E(t,i),n,e)}}d=p,p+=R}var g;return h.forEach((t,i)=>{for(const s in t){const o=t[s];o.sort(R);const r=[],l=[],c=[];for(let t=0;t<o.length;t++){const{at:e,value:n,easing:i}=o[t];r.push(n),l.push(a(0,y,e)),c.push(i||"easeOut")}0!==l[0]&&(l.unshift(0),r.unshift(r[0]),c.unshift("easeInOut")),1!==l[l.length-1]&&(l.push(1),r.push(null)),u.has(i)||u.set(i,{keyframes:{},transition:{}});const h=u.get(i);h.keyframes[s]=r,h.transition[s]={...e,duration:y,ease:c,times:l,...n}}}),u}(t,e).forEach(({keyframes:t,transition:e},i)=>{n.push(...X(i,t,e))}),new u(n)}}));
|