@motionone/animation - npm Package Compare versions

Comparing version 10.6.0-rc.4 to 10.6.0-rc.5

dist/Animation.cjs.js

@@ -21,9 +21,10 @@ 'use strict';
         const totalDuration = duration * (repeat + 1);
-        /**
-         * We don't currently support custom easing (spring, glide etc) in Animation
-         * (although this is completely possible), so this will have been hydrated by
-         * animateStyle.
-         */
-        if (utils.isEasingGenerator(easing$1))
-            easing$1 = "ease";
+        if (utils.isEasingGenerator(easing$1)) {
+            const custom = easing$1.createAnimation(keyframes, () => "0", true);
+            easing$1 = custom.easing;
+            if (custom.keyframes !== undefined)
+                keyframes = custom.keyframes;
+            if (custom.duration !== undefined)
+                duration = custom.duration;
+        }
         const interpolate$1 = interpolate.interpolate(keyframes, offset, utils.isEasingList(easing$1)
@@ -30,0 +31,0 @@ ? easing$1.map(easing.getEasingFunction)

dist/Animation.es.js

@@ -17,9 +17,10 @@ import { defaults, isEasingGenerator, isEasingList } from '@motionone/utils';
         const totalDuration = duration * (repeat + 1);
-        /**
-         * We don't currently support custom easing (spring, glide etc) in Animation
-         * (although this is completely possible), so this will have been hydrated by
-         * animateStyle.
-         */
-        if (isEasingGenerator(easing))
-            easing = "ease";
+        if (isEasingGenerator(easing)) {
+            const custom = easing.createAnimation(keyframes, () => "0", true);
+            easing = custom.easing;
+            if (custom.keyframes !== undefined)
+                keyframes = custom.keyframes;
+            if (custom.duration !== undefined)
+                duration = custom.duration;
+        }
         const interpolate$1 = interpolate(keyframes, offset, isEasingList(easing)
@@ -26,0 +27,0 @@ ? easing.map(getEasingFunction)

dist/size-index.js

@@ -1,1 +0,1 @@
-const t=.3,e=0,i=0,s=0,a="ease",n=t=>Array.isArray(t)&&!("number"==typeof t[0]),r=(t,e,i)=>-i*t+i*e+t,h=t=>t,o=(t,e,i)=>e-t==0?1:(i-t)/(e-t);function c(t,e){const i=t[t.length-1];for(let s=1;s<=e;s++){const a=o(0,e,s);t.push(r(i,1,a))}}const l=(t,e,i)=>(((1-3*i+3*e)*t+(3*i-6*e))*t+3*e)*t;function m(t,e,i,s){if(t===e&&i===s)return h;const a=e=>function(t,e,i,s,a){let n,r,h=0;do{r=e+(i-e)/2,n=l(r,s,a)-t,n>0?i=r:e=r}while(Math.abs(n)>1e-7&&++h<12);return r}(e,0,1,t,i);return t=>0===t||1===t?t:l(a(t),e,s)}const u=(t,e="end")=>i=>{const s=(i="end"===e?Math.min(i,.999):Math.max(i,.001))*t,a="end"===e?Math.floor(s):Math.ceil(s);return n=0,r=1,h=a/t,Math.min(Math.max(h,n),r);var n,r,h},p={ease:m(.25,.1,.25,1),"ease-in":m(.42,0,1,1),"ease-in-out":m(.42,0,.58,1),"ease-out":m(0,0,.58,1)},f=/\((.*?)\)/;function d(t){if("function"==typeof t)return t;if(Array.isArray(t))return m(...t);if(p[t])return p[t];if(t.startsWith("steps")){const e=f.exec(t);if(e){const t=e[1].split(",");return u(parseFloat(t[0]),t[1].trim())}}return h}function y(t,e){return n(t)?t[((t,e,i)=>{const s=e-t;return((i-t)%s+s)%s+t})(0,t.length,e)]:t}function T(t,e=function(t){const e=[0];return c(e,t-1),e}(t.length),i=h){const s=t.length,a=s-e.length;return a>0&&c(e,a),a=>{let n=0;for(;n<s-2&&!(a<e[n+1]);n++);let h=(c=o(e[n],e[n+1],a),Math.min(1,Math.max(c,0)));var c;return h=y(i,n)(h),r(t[n],t[n+1],h)}}class v{constructor(r,h=[0,1],{easing:o=a,duration:c=t,delay:l=e,endDelay:m=i,repeat:u=s,offset:p,direction:f="normal"}={}){this.startTime=0,this.rate=1,this.t=0,this.cancelTimestamp=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e}));const y=c*(u+1);(t=>"object"==typeof t&&Boolean(t.createAnimation))(o)&&(o="ease");const v=T(h,p,n(o)?o.map(d):d(o));this.tick=t=>{var e;this.pauseTime&&(t=this.pauseTime);let i=(t-this.startTime)*this.rate;this.t=i,i/=1e3,i=Math.max(i-l,0),"finished"===this.playState&&(i=y);const s=i/c;let a=Math.floor(s),n=s%1;!n&&s>=1&&(n=1),1===n&&a--;const h=a%2;("reverse"===f||"alternate"===f&&h||"alternate-reverse"===f&&!h)&&(n=1-n);const o=v(i>=y?1:Math.min(n,1));r(o);"finished"===this.playState||i>=y+m?(this.playState="finished",null===(e=this.resolve)||void 0===e||e.call(this,o)):"idle"!==this.playState&&(this.frameRequestId=requestAnimationFrame(this.tick))},this.play()}play(){const t=performance.now();this.playState="running",this.pauseTime?this.startTime=t-(this.pauseTime-this.startTime):this.startTime||(this.startTime=t),this.pauseTime=void 0,requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=performance.now()}finish(){this.playState="finished",this.tick(0)}cancel(){var t;this.playState="idle",this.tick(this.cancelTimestamp),null===(t=this.reject)||void 0===t||t.call(this,!1),void 0!==this.frameRequestId&&cancelAnimationFrame(this.frameRequestId)}reverse(){this.rate*=-1}commitStyles(){this.cancelTimestamp=performance.now()}get currentTime(){return this.t}set currentTime(t){this.pauseTime||0===this.rate?this.pauseTime=t:this.startTime=performance.now()-t/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}export{v as Animation,y as getEasingForSegment,d as getEasingFunction};
+const t=.3,e=0,i=0,s=0,a="ease",n=t=>Array.isArray(t)&&!("number"==typeof t[0]),r=(t,e,i)=>-i*t+i*e+t,h=t=>t,o=(t,e,i)=>e-t==0?1:(i-t)/(e-t);function c(t,e){const i=t[t.length-1];for(let s=1;s<=e;s++){const a=o(0,e,s);t.push(r(i,1,a))}}const l=(t,e,i)=>(((1-3*i+3*e)*t+(3*i-6*e))*t+3*e)*t;function m(t,e,i,s){if(t===e&&i===s)return h;const a=e=>function(t,e,i,s,a){let n,r,h=0;do{r=e+(i-e)/2,n=l(r,s,a)-t,n>0?i=r:e=r}while(Math.abs(n)>1e-7&&++h<12);return r}(e,0,1,t,i);return t=>0===t||1===t?t:l(a(t),e,s)}const u=(t,e="end")=>i=>{const s=(i="end"===e?Math.min(i,.999):Math.max(i,.001))*t,a="end"===e?Math.floor(s):Math.ceil(s);return n=0,r=1,h=a/t,Math.min(Math.max(h,n),r);var n,r,h},p={ease:m(.25,.1,.25,1),"ease-in":m(.42,0,1,1),"ease-in-out":m(.42,0,.58,1),"ease-out":m(0,0,.58,1)},f=/\((.*?)\)/;function d(t){if("function"==typeof t)return t;if(Array.isArray(t))return m(...t);if(p[t])return p[t];if(t.startsWith("steps")){const e=f.exec(t);if(e){const t=e[1].split(",");return u(parseFloat(t[0]),t[1].trim())}}return h}function y(t,e){return n(t)?t[((t,e,i)=>{const s=e-t;return((i-t)%s+s)%s+t})(0,t.length,e)]:t}function T(t,e=function(t){const e=[0];return c(e,t-1),e}(t.length),i=h){const s=t.length,a=s-e.length;return a>0&&c(e,a),a=>{let n=0;for(;n<s-2&&!(a<e[n+1]);n++);let h=(c=o(e[n],e[n+1],a),Math.min(1,Math.max(c,0)));var c;return h=y(i,n)(h),r(t[n],t[n+1],h)}}class v{constructor(r,h=[0,1],{easing:o=a,duration:c=t,delay:l=e,endDelay:m=i,repeat:u=s,offset:p,direction:f="normal"}={}){this.startTime=0,this.rate=1,this.t=0,this.cancelTimestamp=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e}));const y=c*(u+1);if((t=>"object"==typeof t&&Boolean(t.createAnimation))(o)){const t=o.createAnimation(h,(()=>"0"),!0);o=t.easing,void 0!==t.keyframes&&(h=t.keyframes),void 0!==t.duration&&(c=t.duration)}const v=T(h,p,n(o)?o.map(d):d(o));this.tick=t=>{var e;this.pauseTime&&(t=this.pauseTime);let i=(t-this.startTime)*this.rate;this.t=i,i/=1e3,i=Math.max(i-l,0),"finished"===this.playState&&(i=y);const s=i/c;let a=Math.floor(s),n=s%1;!n&&s>=1&&(n=1),1===n&&a--;const h=a%2;("reverse"===f||"alternate"===f&&h||"alternate-reverse"===f&&!h)&&(n=1-n);const o=v(i>=y?1:Math.min(n,1));r(o);"finished"===this.playState||i>=y+m?(this.playState="finished",null===(e=this.resolve)||void 0===e||e.call(this,o)):"idle"!==this.playState&&(this.frameRequestId=requestAnimationFrame(this.tick))},this.play()}play(){const t=performance.now();this.playState="running",this.pauseTime?this.startTime=t-(this.pauseTime-this.startTime):this.startTime||(this.startTime=t),this.pauseTime=void 0,requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=performance.now()}finish(){this.playState="finished",this.tick(0)}cancel(){var t;this.playState="idle",this.tick(this.cancelTimestamp),null===(t=this.reject)||void 0===t||t.call(this,!1),void 0!==this.frameRequestId&&cancelAnimationFrame(this.frameRequestId)}reverse(){this.rate*=-1}commitStyles(){this.cancelTimestamp=performance.now()}get currentTime(){return this.t}set currentTime(t){this.pauseTime||0===this.rate?this.pauseTime=t:this.startTime=performance.now()-t/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}export{v as Animation,y as getEasingForSegment,d as getEasingFunction};

lib/Animation.js

@@ -16,9 +16,10 @@ import { isEasingGenerator, isEasingList, defaults } from "@motionone/utils";
         const totalDuration = duration * (repeat + 1);
-        /**
-         * We don't currently support custom easing (spring, glide etc) in Animation
-         * (although this is completely possible), so this will have been hydrated by
-         * animateStyle.
-         */
-        if (isEasingGenerator(easing))
-            easing = "ease";
+        if (isEasingGenerator(easing)) {
+            const custom = easing.createAnimation(keyframes, () => "0", true);
+            easing = custom.easing;
+            if (custom.keyframes !== undefined)
+                keyframes = custom.keyframes;
+            if (custom.duration !== undefined)
+                duration = custom.duration;
+        }
         const interpolate = createInterpolate(keyframes, offset, isEasingList(easing)
@@ -25,0 +26,0 @@ ? easing.map(getEasingFunction)

package.json

 {
   "name": "@motionone/animation",
-  "version": "10.6.0-rc.4",
+  "version": "10.6.0-rc.5",
   "description": "A semi-polyfill WAAPI animation.",
@@ -18,5 +18,5 @@ "license": "MIT",
   "dependencies": {
-    "@motionone/easing": "^10.6.0-rc.4",
-    "@motionone/types": "^10.6.0-rc.4",
-    "@motionone/utils": "^10.6.0-rc.4",
+    "@motionone/easing": "^10.6.0-rc.5",
+    "@motionone/types": "^10.6.0-rc.5",
+    "@motionone/utils": "^10.6.0-rc.5",
     "tslib": "^2.3.1"
@@ -30,3 +30,3 @@ },
   ],
-  "gitHead": "e7a396e4a128cae6885d0a1a9abdc04c510d1a56"
+  "gitHead": "6fc943b6f24709de235d1bff0fb09e0f71de2bfb"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

40156

increased by1.4%

Lines of code

679

increased by0.44%

Dependency changes

• Updated@motionone/easing@^10.6.0-rc.5

• Updated@motionone/types@^10.6.0-rc.5

• Updated@motionone/utils@^10.6.0-rc.5