Socket
Socket
Sign inDemoInstall

@motionone/react

Package Overview
Dependencies
Maintainers
2
Versions
51
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@motionone/react - npm Package Compare versions

Comparing version 10.13.1 to 10.13.2

2

dist/size.js

@@ -1,1 +0,1 @@

import*as t from"react";import{createContext as e,useEffect as n,forwardRef as i,useContext as r,useMemo as a,useRef as s,createElement as o}from"react";function c(t,e){var n={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(t);r<i.length;r++)e.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(t,i[r])&&(n[i[r]]=t[i[r]])}return n}class l{setAnimation(t){this.animation=t,null==t||t.finished.then((()=>this.clearAnimation())).catch((()=>{}))}clearAnimation(){this.animation=this.generator=void 0}}const u=new WeakMap;function h(t){return u.has(t)||u.set(t,{transforms:[],values:new Map}),u.get(t)}function p(t,e){-1===t.indexOf(e)&&t.push(e)}const f=(t,e,n)=>Math.min(Math.max(n,t),e),d={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},m=t=>"number"==typeof t,y=t=>Array.isArray(t)&&!m(t[0]);const v=(t,e,n)=>-n*t+n*e+t,g=()=>{},w=t=>t,b=(t,e,n)=>e-t==0?1:(n-t)/(e-t);function E(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const r=b(0,e,i);t.push(v(n,1,r))}}function O(t,e=function(t){const e=[0];return E(e,t-1),e}(t.length),n=w){const i=t.length,r=i-e.length;return r>0&&E(e,r),r=>{let a=0;for(;a<i-2&&!(r<e[a+1]);a++);let s=f(0,1,b(e[a],e[a+1],r));const o=function(t,e){return y(t)?t[((t,e,n)=>{const i=e-t;return((n-t)%i+i)%i+t})(0,t.length,e)]:t}(n,a);return s=o(s),v(t[a],t[a+1],s)}}const S=t=>"object"==typeof t&&Boolean(t.createAnimation),A=t=>"function"==typeof t,T=t=>1e3*t,D=["","X","Y","Z"],M={x:"translateX",y:"translateY",z:"translateZ"},x={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},V={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:x,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:w},skew:x},j=new Map,k=t=>`--motion-${t}`,P=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{D.forEach((e=>{P.push(t+e),j.set(k(t+e),V[t])}))}));const L=(t,e)=>P.indexOf(t)-P.indexOf(e),C=new Set(P),R=t=>C.has(t),I=t=>t.sort(L).reduce(q,"").trim(),q=(t,e)=>`${t} ${e}(var(${k(e)}))`,B=t=>t.startsWith("--"),U=new Set;const $=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function F(t,e,n,i){if(t===e&&n===i)return w;const r=e=>function(t,e,n,i,r){let a,s,o=0;do{s=e+(n-e)/2,a=$(s,i,r)-t,a>0?n=s:e=s}while(Math.abs(a)>1e-7&&++o<12);return s}(e,0,1,t,n);return t=>0===t||1===t?t:$(r(t),e,i)}const H={ease:F(.25,.1,.25,1),"ease-in":F(.42,0,1,1),"ease-in-out":F(.42,0,.58,1),"ease-out":F(0,0,.58,1)},W=/\((.*?)\)/;function _(t){if(A(t))return t;if(Array.isArray(t))return F(...t);if(H[t])return H[t];if(t.startsWith("steps")){const e=W.exec(t);if(e){const t=e[1].split(",");return((t,e="end")=>n=>{const i=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,r="end"===e?Math.floor(i):Math.ceil(i);return f(0,1,r/t)})(parseFloat(t[0]),t[1].trim())}}return w}class z{constructor(t,e=[0,1],{easing:n,duration:i=d.duration,delay:r=d.delay,endDelay:a=d.endDelay,repeat:s=d.repeat,offset:o,direction:c="normal"}={}){if(this.startTime=null,this.rate=1,this.t=0,this.cancelTimestamp=null,this.easing=w,this.duration=0,this.totalDuration=0,this.repeat=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e})),n=n||d.easing,S(n)){const t=n.createAnimation(e,(()=>"0"),!0);n=t.easing,void 0!==t.keyframes&&(e=t.keyframes),void 0!==t.duration&&(i=t.duration)}this.repeat=s,this.easing=y(n)?w:_(n),this.updateDuration(i);const l=O(e,o,y(n)?n.map(_):w);this.tick=e=>{var n;let i=0;i=void 0!==this.pauseTime?this.pauseTime:(e-this.startTime)*this.rate,this.t=i,i/=1e3,i=Math.max(i-r,0),"finished"===this.playState&&void 0===this.pauseTime&&(i=this.totalDuration);const s=i/this.duration;let o=Math.floor(s),u=s%1;!u&&s>=1&&(u=1),1===u&&o--;const h=o%2;("reverse"===c||"alternate"===c&&h||"alternate-reverse"===c&&!h)&&(u=1-u);const p=i>=this.totalDuration?1:Math.min(u,1),f=l(this.easing(p));t(f);void 0===this.pauseTime&&("finished"===this.playState||i>=this.totalDuration+a)?(this.playState="finished",null===(n=this.resolve)||void 0===n||n.call(this,f)):"idle"!==this.playState&&(this.frameRequestId=requestAnimationFrame(this.tick))},this.play()}play(){const t=performance.now();this.playState="running",void 0!==this.pauseTime?this.startTime=t-this.pauseTime:this.startTime||(this.startTime=t),this.cancelTimestamp=this.startTime,this.pauseTime=void 0,this.frameRequestId=requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=this.t}finish(){this.playState="finished",this.tick(0)}stop(){var t;this.playState="idle",void 0!==this.frameRequestId&&cancelAnimationFrame(this.frameRequestId),null===(t=this.reject)||void 0===t||t.call(this,!1)}cancel(){this.stop(),this.tick(this.cancelTimestamp)}reverse(){this.rate*=-1}commitStyles(){}updateDuration(t){this.duration=t,this.totalDuration=t*(this.repeat+1)}get currentTime(){return this.t}set currentTime(t){void 0!==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}}const N=(t,e)=>document.createElement("div").animate(t,e),K={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{N({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(N({opacity:[0,1]},{duration:.001}).finished),linearEasing:()=>{try{N({opacity:0},{easing:"linear(0, 1)"})}catch(t){return!1}return!0}},X={},Y={};for(const t in K)Y[t]=()=>(void 0===X[t]&&(X[t]=K[t]()),X[t]);const Z=(t,e)=>A(t)?Y.linearEasing()?`linear(${((t,e)=>{let n="";const i=Math.round(e/.015);for(let e=0;e<i;e++)n+=t(b(0,i-1,e))+", ";return n.substring(0,n.length-2)})(t,e)})`:d.easing:(t=>Array.isArray(t)&&m(t[0]))(t)?G(t):t,G=([t,e,n,i])=>`cubic-bezier(${t}, ${e}, ${n}, ${i})`;function J(t){return M[t]&&(t=M[t]),R(t)?k(t):t}const Q=(t,e)=>{e=J(e);let n=B(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!n&&0!==n){const t=j.get(e);t&&(n=t.initialValue)}return n},tt=(t,e,n)=>{e=J(e),B(e)?t.style.setProperty(e,n):t.style[e]=n};function et(t,e,n,i={}){const r=window.__MOTION_DEV_TOOLS_RECORD,a=!1!==i.record&&r;let s,{duration:o=d.duration,delay:c=d.delay,endDelay:u=d.endDelay,repeat:f=d.repeat,easing:v=d.easing,direction:w,offset:b,allowWebkitAcceleration:E=!1}=i;const O=h(t),D=R(e);let x=Y.waapi();D&&((t,e)=>{M[e]&&(e=M[e]);const{transforms:n}=h(t);p(n,e),t.style.transform=I(n)})(t,e);const V=J(e),k=function(t,e){return t.has(e)||t.set(e,new l),t.get(e)}(O.values,V),P=j.get(V);return function(t,e=!0){if(t&&"finished"!==t.playState)try{t.stop?t.stop():(e&&t.commitStyles(),t.cancel())}catch(t){}}(k.animation,!(S(v)&&k.generator)&&!1!==i.record),()=>{const l=()=>{var e,n;return null!==(n=null!==(e=Q(t,V))&&void 0!==e?e:null==P?void 0:P.initialValue)&&void 0!==n?n:0};let h=function(t,e){for(let n=0;n<t.length;n++)null===t[n]&&(t[n]=n?t[n-1]:e());return t}((t=>Array.isArray(t)?t:[t])(n),l);if(S(v)){const t=v.createAnimation(h,l,D,V,k);v=t.easing,void 0!==t.keyframes&&(h=t.keyframes),void 0!==t.duration&&(o=t.duration)}if(B(V)&&(Y.cssRegisterProperty()?function(t){if(!U.has(t)){U.add(t);try{const{syntax:e,initialValue:n}=j.has(t)?j.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}(V):x=!1),D&&!Y.linearEasing()&&(A(v)||y(v)&&v.some(A))&&(x=!1),x){P&&(h=h.map((t=>m(t)?P.toDefaultUnit(t):t))),1!==h.length||Y.partialKeyframes()&&!a||h.unshift(l());const e={delay:T(c),duration:T(o),endDelay:T(u),easing:y(v)?void 0:Z(v,o),direction:w,iterations:f+1,fill:"both"};s=t.animate({[V]:h,offset:b,easing:y(v)?v.map((t=>Z(t,o))):void 0},e),s.finished||(s.finished=new Promise(((t,e)=>{s.onfinish=t,s.oncancel=e})));const n=h[h.length-1];s.finished.then((()=>{tt(t,V,n),s.cancel()})).catch(g),E||(s.playbackRate=1.000001)}else if(D){h=h.map((t=>"string"==typeof t?parseFloat(t):t)),1===h.length&&h.unshift(parseFloat(l()));s=new z((e=>{P&&(e=P.toDefaultUnit(e)),tt(t,V,e)}),h,Object.assign(Object.assign({},i),{duration:o,easing:v}))}else{const e=h[h.length-1];tt(t,V,P&&m(e)?P.toDefaultUnit(e):e)}return a&&r(t,e,h,{duration:o,delay:c,easing:v,repeat:f,offset:b},"motion-one"),k.setAnimation(s),s}}const nt=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):Object.assign({},t);var it=function(){};"production"!==process.env.NODE_ENV&&(it=function(t,e){if(!t)throw new Error(e)});const rt={any:0,all:1};function at(t,e,{root:n,margin:i,amount:r="any"}={}){if("undefined"==typeof IntersectionObserver)return()=>{};const a=function(t,e){var n;return"string"==typeof t?e?(null!==(n=e[t])&&void 0!==n||(e[t]=document.querySelectorAll(t)),t=e[t]):t=document.querySelectorAll(t):t instanceof Element&&(t=[t]),Array.from(t||[])}(t),s=new WeakMap,o=new IntersectionObserver((t=>{t.forEach((t=>{const n=s.get(t.target);if(t.isIntersecting!==Boolean(n))if(t.isIntersecting){const n=e(t);A(n)?s.set(t.target,n):o.unobserve(t.target)}else n&&(n(t),s.delete(t.target))}))}),{root:n,rootMargin:i,threshold:"number"==typeof r?r:rt[r]});return a.forEach((t=>o.observe(t))),()=>o.disconnect()}function st(t,e){return function(t){return"object"==typeof t}(t)?t:t&&e?e[t]:void 0}let ot;function ct(){if(!ot)return;const t=ot.sort(ut).map(ht);t.forEach(pt),t.forEach(pt),ot=void 0}function lt(t){ot?p(ot,t):(ot=[t],requestAnimationFrame(ct))}const ut=(t,e)=>t.getDepth()-e.getDepth(),ht=t=>t.animateUpdates(),pt=t=>t.next(),ft=(t,e)=>new CustomEvent(t,{detail:{target:e}});function dt(t,e,n){t.dispatchEvent(new CustomEvent(e,{detail:{originalEvent:n}}))}function mt(t,e,n){t.dispatchEvent(new CustomEvent(e,{detail:{originalEntry:n}}))}const yt=(t,e,n)=>i=>{i.pointerType&&"mouse"!==i.pointerType||(n(),dt(t,e,i))},vt={inView:{isActive:t=>Boolean(t.inView),subscribe:(t,{enable:e,disable:n},{inViewOptions:i={}})=>{const{once:r}=i,a=c(i,["once"]);return at(t,(i=>{if(e(),mt(t,"viewenter",i),!r)return e=>{n(),mt(t,"viewleave",e)}}),a)}},hover:{isActive:t=>Boolean(t.hover),subscribe:(t,{enable:e,disable:n})=>{const i=yt(t,"hoverstart",e),r=yt(t,"hoverend",n);return t.addEventListener("pointerenter",i),t.addEventListener("pointerleave",r),()=>{t.removeEventListener("pointerenter",i),t.removeEventListener("pointerleave",r)}}},press:{isActive:t=>Boolean(t.press),subscribe:(t,{enable:e,disable:n})=>{const i=e=>{n(),dt(t,"pressend",e),window.removeEventListener("pointerup",i)},r=n=>{e(),dt(t,"pressstart",n),window.addEventListener("pointerup",i)};return t.addEventListener("pointerdown",r),()=>{t.removeEventListener("pointerdown",r),window.removeEventListener("pointerup",i)}}}},gt=["initial","animate",...Object.keys(vt),"exit"],wt=new WeakMap;function bt(t={},e){let n,i=e?e.getDepth()+1:0;const r={initial:!0,animate:!0},a={},s={};for(const n of gt)s[n]="string"==typeof t[n]?t[n]:null==e?void 0:e.getContext()[n];const o=!1===t.initial?"animate":"initial";let l=c(st(t[o]||s[o],t.variants)||{},["transition"]);const u=Object.assign({},l);const h=(t,e)=>()=>{r[t]=e,lt(f)},p=()=>{for(const e in vt){const i=vt[e].isActive(t),r=a[e];i&&!r?a[e]=vt[e].subscribe(n,{enable:h(e,!0),disable:h(e,!1)},t):!i&&r&&(r(),delete a[e])}},f={update:e=>{n&&(t=e,p(),lt(f))},setActive:(t,e)=>{n&&(r[t]=e,lt(f))},animateUpdates:function*(){var e,i;const a=l;l={};const s={};for(const n of gt){if(!r[n])continue;const a=st(t[n]);if(a)for(const n in a)"transition"!==n&&(l[n]=a[n],s[n]=nt(null!==(i=null!==(e=a.transition)&&void 0!==e?e:t.transition)&&void 0!==i?i:{},n))}const o=new Set([...Object.keys(l),...Object.keys(a)]),c=[];o.forEach((t=>{var e,i,r;void 0===l[t]&&(l[t]=u[t]),i=a[t],r=l[t],typeof i==typeof r&&(Array.isArray(i)&&Array.isArray(r)?function(t,e){const n=e.length;if(n!==t.length)return!1;for(let i=0;i<n;i++)if(e[i]!==t[i])return!1;return!0}(i,r):i===r)||(null!==(e=u[t])&&void 0!==e||(u[t]=Q(n,t)),c.push(et(n,t,l[t],s[t])))})),yield;const h=c.map((t=>t())).filter(Boolean);if(!h.length)return;const p=l;n.dispatchEvent(ft("motionstart",p)),Promise.all(h.map((t=>t.finished))).then((()=>{n.dispatchEvent(ft("motioncomplete",p))})).catch(g)},getDepth:()=>i,getTarget:()=>l,getOptions:()=>t,getContext:()=>s,mount:t=>(it(Boolean(t),"Animation state must be mounted with valid Element"),n=t,wt.set(n,f),p(),()=>{wt.delete(n),function(t){ot&&function(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}(ot,t)}(f);for(const t in a)a[t]()}),isMounted:()=>Boolean(n)};return f}const Et=e(void 0);function Ot(e){return i((function(i,l){var{initial:u,animate:h,press:p,hover:f,inView:d,inViewOptions:y,variants:v,style:g,transition:w,onMotionStart:b,onMotionComplete:E,onHoverStart:O,onHoverEnd:S,onPressStart:A,onPressEnd:T,onViewEnter:D,onViewLeave:x}=i,V=c(i,["initial","animate","press","hover","inView","inViewOptions","variants","style","transition","onMotionStart","onMotionComplete","onHoverStart","onHoverEnd","onPressStart","onPressEnd","onViewEnter","onViewLeave"]);const P={initial:u,animate:h,press:p,hover:f,inView:d,inViewOptions:y,variants:v,transition:w},L=bt(P,r(Et)),C=a((()=>function(t){const e={},n=[];for(let i in t){const r=t[i];R(i)&&(M[i]&&(i=M[i]),n.push(i),i=k(i));let a=Array.isArray(r)?r[0]:r;const s=j.get(i);s&&(a=m(r)?s.toDefaultUnit(r):r),e[i]=a}return n.length&&(e.transform=I(n)),e}(L.getTarget())),[]),q=l||s(null);n((()=>L.mount(q.current)),[]),n((()=>L.update(P))),function(t,e){n((()=>{const n=Object.keys(e).map((n=>{return i=t.current,r=n.replace("on","").toLowerCase(),a=e[n],i.addEventListener(r,a,s),()=>i.removeEventListener(r,a,s);var i,r,a,s}));return()=>{n.forEach((t=>t()))}}))}(q,{onMotionStart:b,onMotionComplete:E,onHoverStart:O,onHoverEnd:S,onPressStart:A,onPressEnd:T,onViewEnter:D,onViewLeave:x});const B=o(e,Object.assign(Object.assign({},V),{ref:q,style:Object.assign(Object.assign({},g),C)}));return t.createElement(Et.Provider,{value:L},B)}))}const St=new Map,At=new Proxy({},{get:(t,e)=>(!St.has(e)&&St.set(e,Ot(e)),St.get(e))});export{At as motion};
import*as t from"react";import{createContext as e,useEffect as n,forwardRef as i,useContext as r,useMemo as a,useRef as o,createElement as s}from"react";function c(t,e){var n={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(t);r<i.length;r++)e.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(t,i[r])&&(n[i[r]]=t[i[r]])}return n}class l{setAnimation(t){this.animation=t,null==t||t.finished.then((()=>this.clearAnimation())).catch((()=>{}))}clearAnimation(){this.animation=this.generator=void 0}}const u=new WeakMap;function h(t){return u.has(t)||u.set(t,{transforms:[],values:new Map}),u.get(t)}function p(t,e){-1===t.indexOf(e)&&t.push(e)}const f=(t,e,n)=>Math.min(Math.max(n,t),e),d={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},m=t=>"number"==typeof t,y=t=>Array.isArray(t)&&!m(t[0]);const v=(t,e,n)=>-n*t+n*e+t,g=()=>{},w=t=>t,b=(t,e,n)=>e-t==0?1:(n-t)/(e-t);function E(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const r=b(0,e,i);t.push(v(n,1,r))}}function O(t,e=function(t){const e=[0];return E(e,t-1),e}(t.length),n=w){const i=t.length,r=i-e.length;return r>0&&E(e,r),r=>{let a=0;for(;a<i-2&&!(r<e[a+1]);a++);let o=f(0,1,b(e[a],e[a+1],r));const s=function(t,e){return y(t)?t[((t,e,n)=>{const i=e-t;return((n-t)%i+i)%i+t})(0,t.length,e)]:t}(n,a);return o=s(o),v(t[a],t[a+1],o)}}const S=t=>Array.isArray(t)&&m(t[0]),A=t=>"object"==typeof t&&Boolean(t.createAnimation),T=t=>"function"==typeof t,D=t=>1e3*t,M=["","X","Y","Z"],x={x:"translateX",y:"translateY",z:"translateZ"},V={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},j={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:V,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:w},skew:V},k=new Map,P=t=>`--motion-${t}`,L=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{M.forEach((e=>{L.push(t+e),k.set(P(t+e),j[t])}))}));const C=(t,e)=>L.indexOf(t)-L.indexOf(e),R=new Set(L),I=t=>R.has(t),q=t=>t.sort(C).reduce(B,"").trim(),B=(t,e)=>`${t} ${e}(var(${P(e)}))`,U=t=>t.startsWith("--"),$=new Set;const F=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function H(t,e,n,i){if(t===e&&n===i)return w;const r=e=>function(t,e,n,i,r){let a,o,s=0;do{o=e+(n-e)/2,a=F(o,i,r)-t,a>0?n=o:e=o}while(Math.abs(a)>1e-7&&++s<12);return o}(e,0,1,t,n);return t=>0===t||1===t?t:F(r(t),e,i)}const W={ease:H(.25,.1,.25,1),"ease-in":H(.42,0,1,1),"ease-in-out":H(.42,0,.58,1),"ease-out":H(0,0,.58,1)},_=/\((.*?)\)/;function z(t){if(T(t))return t;if(S(t))return H(...t);if(W[t])return W[t];if(t.startsWith("steps")){const e=_.exec(t);if(e){const t=e[1].split(",");return((t,e="end")=>n=>{const i=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,r="end"===e?Math.floor(i):Math.ceil(i);return f(0,1,r/t)})(parseFloat(t[0]),t[1].trim())}}return w}class N{constructor(t,e=[0,1],{easing:n,duration:i=d.duration,delay:r=d.delay,endDelay:a=d.endDelay,repeat:o=d.repeat,offset:s,direction:c="normal"}={}){if(this.startTime=null,this.rate=1,this.t=0,this.cancelTimestamp=null,this.easing=w,this.duration=0,this.totalDuration=0,this.repeat=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e})),n=n||d.easing,A(n)){const t=n.createAnimation(e,(()=>"0"),!0);n=t.easing,void 0!==t.keyframes&&(e=t.keyframes),void 0!==t.duration&&(i=t.duration)}this.repeat=o,this.easing=y(n)?w:z(n),this.updateDuration(i);const l=O(e,s,y(n)?n.map(z):w);this.tick=e=>{var n;let i=0;i=void 0!==this.pauseTime?this.pauseTime:(e-this.startTime)*this.rate,this.t=i,i/=1e3,i=Math.max(i-r,0),"finished"===this.playState&&void 0===this.pauseTime&&(i=this.totalDuration);const o=i/this.duration;let s=Math.floor(o),u=o%1;!u&&o>=1&&(u=1),1===u&&s--;const h=s%2;("reverse"===c||"alternate"===c&&h||"alternate-reverse"===c&&!h)&&(u=1-u);const p=i>=this.totalDuration?1:Math.min(u,1),f=l(this.easing(p));t(f);void 0===this.pauseTime&&("finished"===this.playState||i>=this.totalDuration+a)?(this.playState="finished",null===(n=this.resolve)||void 0===n||n.call(this,f)):"idle"!==this.playState&&(this.frameRequestId=requestAnimationFrame(this.tick))},this.play()}play(){const t=performance.now();this.playState="running",void 0!==this.pauseTime?this.startTime=t-this.pauseTime:this.startTime||(this.startTime=t),this.cancelTimestamp=this.startTime,this.pauseTime=void 0,this.frameRequestId=requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=this.t}finish(){this.playState="finished",this.tick(0)}stop(){var t;this.playState="idle",void 0!==this.frameRequestId&&cancelAnimationFrame(this.frameRequestId),null===(t=this.reject)||void 0===t||t.call(this,!1)}cancel(){this.stop(),this.tick(this.cancelTimestamp)}reverse(){this.rate*=-1}commitStyles(){}updateDuration(t){this.duration=t,this.totalDuration=t*(this.repeat+1)}get currentTime(){return this.t}set currentTime(t){void 0!==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}}const K=(t,e)=>document.createElement("div").animate(t,e),X={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{K({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(K({opacity:[0,1]},{duration:.001}).finished),linearEasing:()=>{try{K({opacity:0},{easing:"linear(0, 1)"})}catch(t){return!1}return!0}},Y={},Z={};for(const t in X)Z[t]=()=>(void 0===Y[t]&&(Y[t]=X[t]()),Y[t]);const G=(t,e)=>T(t)?Z.linearEasing()?`linear(${((t,e)=>{let n="";const i=Math.round(e/.015);for(let e=0;e<i;e++)n+=t(b(0,i-1,e))+", ";return n.substring(0,n.length-2)})(t,e)})`:d.easing:S(t)?J(t):t,J=([t,e,n,i])=>`cubic-bezier(${t}, ${e}, ${n}, ${i})`;function Q(t){return x[t]&&(t=x[t]),I(t)?P(t):t}const tt=(t,e)=>{e=Q(e);let n=U(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!n&&0!==n){const t=k.get(e);t&&(n=t.initialValue)}return n},et=(t,e,n)=>{e=Q(e),U(e)?t.style.setProperty(e,n):t.style[e]=n};function nt(t,e,n,i={}){const r=window.__MOTION_DEV_TOOLS_RECORD,a=!1!==i.record&&r;let o,{duration:s=d.duration,delay:c=d.delay,endDelay:u=d.endDelay,repeat:f=d.repeat,easing:v=d.easing,direction:w,offset:b,allowWebkitAcceleration:E=!1}=i;const O=h(t),S=I(e);let M=Z.waapi();S&&((t,e)=>{x[e]&&(e=x[e]);const{transforms:n}=h(t);p(n,e),t.style.transform=q(n)})(t,e);const V=Q(e),j=function(t,e){return t.has(e)||t.set(e,new l),t.get(e)}(O.values,V),P=k.get(V);return function(t,e=!0){if(t&&"finished"!==t.playState)try{t.stop?t.stop():(e&&t.commitStyles(),t.cancel())}catch(t){}}(j.animation,!(A(v)&&j.generator)&&!1!==i.record),()=>{const l=()=>{var e,n;return null!==(n=null!==(e=tt(t,V))&&void 0!==e?e:null==P?void 0:P.initialValue)&&void 0!==n?n:0};let h=function(t,e){for(let n=0;n<t.length;n++)null===t[n]&&(t[n]=n?t[n-1]:e());return t}((t=>Array.isArray(t)?t:[t])(n),l);if(A(v)){const t=v.createAnimation(h,l,S,V,j);v=t.easing,void 0!==t.keyframes&&(h=t.keyframes),void 0!==t.duration&&(s=t.duration)}if(U(V)&&(Z.cssRegisterProperty()?function(t){if(!$.has(t)){$.add(t);try{const{syntax:e,initialValue:n}=k.has(t)?k.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}(V):M=!1),S&&!Z.linearEasing()&&(T(v)||y(v)&&v.some(T))&&(M=!1),M){P&&(h=h.map((t=>m(t)?P.toDefaultUnit(t):t))),1!==h.length||Z.partialKeyframes()&&!a||h.unshift(l());const e={delay:D(c),duration:D(s),endDelay:D(u),easing:y(v)?void 0:G(v,s),direction:w,iterations:f+1,fill:"both"};o=t.animate({[V]:h,offset:b,easing:y(v)?v.map((t=>G(t,s))):void 0},e),o.finished||(o.finished=new Promise(((t,e)=>{o.onfinish=t,o.oncancel=e})));const n=h[h.length-1];o.finished.then((()=>{et(t,V,n),o.cancel()})).catch(g),E||(o.playbackRate=1.000001)}else if(S){h=h.map((t=>"string"==typeof t?parseFloat(t):t)),1===h.length&&h.unshift(parseFloat(l()));o=new N((e=>{P&&(e=P.toDefaultUnit(e)),et(t,V,e)}),h,Object.assign(Object.assign({},i),{duration:s,easing:v}))}else{const e=h[h.length-1];et(t,V,P&&m(e)?P.toDefaultUnit(e):e)}return a&&r(t,e,h,{duration:s,delay:c,easing:v,repeat:f,offset:b},"motion-one"),j.setAnimation(o),o}}const it=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):Object.assign({},t);var rt=function(){};"production"!==process.env.NODE_ENV&&(rt=function(t,e){if(!t)throw new Error(e)});const at={any:0,all:1};function ot(t,e,{root:n,margin:i,amount:r="any"}={}){if("undefined"==typeof IntersectionObserver)return()=>{};const a=function(t,e){var n;return"string"==typeof t?e?(null!==(n=e[t])&&void 0!==n||(e[t]=document.querySelectorAll(t)),t=e[t]):t=document.querySelectorAll(t):t instanceof Element&&(t=[t]),Array.from(t||[])}(t),o=new WeakMap,s=new IntersectionObserver((t=>{t.forEach((t=>{const n=o.get(t.target);if(t.isIntersecting!==Boolean(n))if(t.isIntersecting){const n=e(t);T(n)?o.set(t.target,n):s.unobserve(t.target)}else n&&(n(t),o.delete(t.target))}))}),{root:n,rootMargin:i,threshold:"number"==typeof r?r:at[r]});return a.forEach((t=>s.observe(t))),()=>s.disconnect()}function st(t,e){return function(t){return"object"==typeof t}(t)?t:t&&e?e[t]:void 0}let ct;function lt(){if(!ct)return;const t=ct.sort(ht).map(pt);t.forEach(ft),t.forEach(ft),ct=void 0}function ut(t){ct?p(ct,t):(ct=[t],requestAnimationFrame(lt))}const ht=(t,e)=>t.getDepth()-e.getDepth(),pt=t=>t.animateUpdates(),ft=t=>t.next(),dt=(t,e)=>new CustomEvent(t,{detail:{target:e}});function mt(t,e,n){t.dispatchEvent(new CustomEvent(e,{detail:{originalEvent:n}}))}function yt(t,e,n){t.dispatchEvent(new CustomEvent(e,{detail:{originalEntry:n}}))}const vt=(t,e,n)=>i=>{i.pointerType&&"mouse"!==i.pointerType||(n(),mt(t,e,i))},gt={inView:{isActive:t=>Boolean(t.inView),subscribe:(t,{enable:e,disable:n},{inViewOptions:i={}})=>{const{once:r}=i,a=c(i,["once"]);return ot(t,(i=>{if(e(),yt(t,"viewenter",i),!r)return e=>{n(),yt(t,"viewleave",e)}}),a)}},hover:{isActive:t=>Boolean(t.hover),subscribe:(t,{enable:e,disable:n})=>{const i=vt(t,"hoverstart",e),r=vt(t,"hoverend",n);return t.addEventListener("pointerenter",i),t.addEventListener("pointerleave",r),()=>{t.removeEventListener("pointerenter",i),t.removeEventListener("pointerleave",r)}}},press:{isActive:t=>Boolean(t.press),subscribe:(t,{enable:e,disable:n})=>{const i=e=>{n(),mt(t,"pressend",e),window.removeEventListener("pointerup",i)},r=n=>{e(),mt(t,"pressstart",n),window.addEventListener("pointerup",i)};return t.addEventListener("pointerdown",r),()=>{t.removeEventListener("pointerdown",r),window.removeEventListener("pointerup",i)}}}},wt=["initial","animate",...Object.keys(gt),"exit"],bt=new WeakMap;function Et(t={},e){let n,i=e?e.getDepth()+1:0;const r={initial:!0,animate:!0},a={},o={};for(const n of wt)o[n]="string"==typeof t[n]?t[n]:null==e?void 0:e.getContext()[n];const s=!1===t.initial?"animate":"initial";let l=c(st(t[s]||o[s],t.variants)||{},["transition"]);const u=Object.assign({},l);const h=(t,e)=>()=>{r[t]=e,ut(f)},p=()=>{for(const e in gt){const i=gt[e].isActive(t),r=a[e];i&&!r?a[e]=gt[e].subscribe(n,{enable:h(e,!0),disable:h(e,!1)},t):!i&&r&&(r(),delete a[e])}},f={update:e=>{n&&(t=e,p(),ut(f))},setActive:(t,e)=>{n&&(r[t]=e,ut(f))},animateUpdates:function*(){var e,i;const a=l;l={};const o={};for(const n of wt){if(!r[n])continue;const a=st(t[n]);if(a)for(const n in a)"transition"!==n&&(l[n]=a[n],o[n]=it(null!==(i=null!==(e=a.transition)&&void 0!==e?e:t.transition)&&void 0!==i?i:{},n))}const s=new Set([...Object.keys(l),...Object.keys(a)]),c=[];s.forEach((t=>{var e,i,r;void 0===l[t]&&(l[t]=u[t]),i=a[t],r=l[t],typeof i==typeof r&&(Array.isArray(i)&&Array.isArray(r)?function(t,e){const n=e.length;if(n!==t.length)return!1;for(let i=0;i<n;i++)if(e[i]!==t[i])return!1;return!0}(i,r):i===r)||(null!==(e=u[t])&&void 0!==e||(u[t]=tt(n,t)),c.push(nt(n,t,l[t],o[t])))})),yield;const h=c.map((t=>t())).filter(Boolean);if(!h.length)return;const p=l;n.dispatchEvent(dt("motionstart",p)),Promise.all(h.map((t=>t.finished))).then((()=>{n.dispatchEvent(dt("motioncomplete",p))})).catch(g)},getDepth:()=>i,getTarget:()=>l,getOptions:()=>t,getContext:()=>o,mount:t=>(rt(Boolean(t),"Animation state must be mounted with valid Element"),n=t,bt.set(n,f),p(),()=>{bt.delete(n),function(t){ct&&function(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}(ct,t)}(f);for(const t in a)a[t]()}),isMounted:()=>Boolean(n)};return f}const Ot=e(void 0);function St(e){return i((function(i,l){var{initial:u,animate:h,press:p,hover:f,inView:d,inViewOptions:y,variants:v,style:g,transition:w,onMotionStart:b,onMotionComplete:E,onHoverStart:O,onHoverEnd:S,onPressStart:A,onPressEnd:T,onViewEnter:D,onViewLeave:M}=i,V=c(i,["initial","animate","press","hover","inView","inViewOptions","variants","style","transition","onMotionStart","onMotionComplete","onHoverStart","onHoverEnd","onPressStart","onPressEnd","onViewEnter","onViewLeave"]);const j={initial:u,animate:h,press:p,hover:f,inView:d,inViewOptions:y,variants:v,transition:w},L=Et(j,r(Ot)),C=a((()=>function(t){const e={},n=[];for(let i in t){const r=t[i];I(i)&&(x[i]&&(i=x[i]),n.push(i),i=P(i));let a=Array.isArray(r)?r[0]:r;const o=k.get(i);o&&(a=m(r)?o.toDefaultUnit(r):r),e[i]=a}return n.length&&(e.transform=q(n)),e}(L.getTarget())),[]),R=l||o(null);n((()=>L.mount(R.current)),[]),n((()=>L.update(j))),function(t,e){n((()=>{const n=Object.keys(e).map((n=>{return i=t.current,r=n.replace("on","").toLowerCase(),a=e[n],i.addEventListener(r,a,o),()=>i.removeEventListener(r,a,o);var i,r,a,o}));return()=>{n.forEach((t=>t()))}}))}(R,{onMotionStart:b,onMotionComplete:E,onHoverStart:O,onHoverEnd:S,onPressStart:A,onPressEnd:T,onViewEnter:D,onViewLeave:M});const B=s(e,Object.assign(Object.assign({},V),{ref:R,style:Object.assign(Object.assign({},g),C)}));return t.createElement(Ot.Provider,{value:L},B)}))}const At=new Map,Tt=new Proxy({},{get:(t,e)=>(!At.has(e)&&At.set(e,St(e)),At.get(e))});export{Tt as motion};

8

package.json
{
"name": "@motionone/react",
"version": "10.13.1",
"version": "10.13.2",
"description": "A tiny, performant animation library for React",

@@ -17,3 +17,3 @@ "license": "MIT",

"dependencies": {
"@motionone/dom": "^10.13.1",
"@motionone/dom": "^10.13.2",
"hey-listen": "^1.0.8",

@@ -23,4 +23,2 @@ "tslib": "^2.3.1"

"devDependencies": {
"@testing-library/dom": "^8.11.1",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.0.0",

@@ -50,3 +48,3 @@ "@types/react": "^17.0.37",

],
"gitHead": "ddaaf9ddc461760f8ebdca38b12f5049e1b92953"
"gitHead": "a33ab88400c8aac4a6755cda6f93c24563d9ddc5"
}

2

README.md
# `@motionone/react`
Prototype React bindings for Motion One. Not intended for public.
Prototype React bindings for Motion One. Not intended for public consumption.

@@ -5,0 +5,0 @@ ## 📚 Documentation

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc