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.5.0-alpha.5 to 10.5.0-beta.0

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}const l=new WeakMap;function u(t){return l.has(t)||l.set(t,{transforms:[],animations:{},generators:{},prevGeneratorState:{}}),l.get(t)}function h(t,e){-1===t.indexOf(e)&&t.push(e)}const p=()=>{},f=t=>t,d=["","X","Y","Z"],m={x:"translateX",y:"translateY",z:"translateZ"},v={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},y={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:v,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:f},skew:v},g=new Map,b=t=>`--motion-${t}`,w=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{d.forEach((e=>{w.push(t+e),g.set(b(t+e),y[t])}))}));const E=(t,e)=>w.indexOf(t)-w.indexOf(e),O=new Set(w),S=t=>O.has(t),x=t=>t.sort(E).reduce(A,"").trim(),A=(t,e)=>`${t} ${e}(var(${b(e)}))`,T=t=>t.startsWith("--"),j=new Set;const P=t=>1e3*t,M=t=>"number"==typeof t,V=t=>Array.isArray(t)&&!M(t[0]),k=t=>"object"==typeof t&&Boolean(t.createAnimation),D=t=>(t=>Array.isArray(t)&&M(t[0]))(t)?L(t):t,L=([t,e,n,i])=>`cubic-bezier(${t}, ${e}, ${n}, ${i})`,C=t=>document.createElement("div").animate(t,{duration:.001}),U={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{C({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(C({opacity:[0,1]}).finished)},B={},$={};for(const t in U)$[t]=()=>(void 0===B[t]&&(B[t]=U[t]()),B[t]);const H={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},I=(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 f;const r=e=>function(t,e,n,i,r){let a,s,o=0;do{s=e+(n-e)/2,a=I(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:I(r(t),e,i)}const R=(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 a=0,s=1,o=r/t,Math.min(Math.max(o,a),s);var a,s,o},W={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)},q=/\((.*?)\)/;function z(t){if("function"==typeof t)return t;if(Array.isArray(t))return F(...t);if(W[t])return W[t];if(t.startsWith("steps")){const e=q.exec(t);if(e){const t=e[1].split(",");return R(parseFloat(t[0]),t[1].trim())}}return f}const G=(t,e,n)=>-n*t+n*e+t,K=(t,e,n)=>e-t==0?1:(n-t)/(e-t);function N(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const r=K(0,e,i);t.push(G(n,1,r))}}function X(t,e=function(t){const e=[0];return N(e,t-1),e}(t.length),n=f){const i=t.length,r=i-e.length;return r>0&&N(e,r),r=>{let a=0;for(;a<i-2&&!(r<e[a+1]);a++);let s=(o=K(e[a],e[a+1],r),Math.min(1,Math.max(o,0)));var o;const c=function(t,e){return V(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=c(s),G(t[a],t[a+1],s)}}class Y{constructor(t,e=[0,1],{easing:n=H.easing,duration:i=H.duration,delay:r=H.delay,endDelay:a=H.endDelay,repeat:s=H.repeat,offset:o,direction:c="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 l=i*(s+1);k(n)&&(n="ease");const u=X(e,o,V(n)?n.map(z):z(n));this.tick=e=>{var n;this.pauseTime&&(e=this.pauseTime);let s=(e-this.startTime)*this.rate;this.t=s,s/=1e3,s=Math.max(s-r,0),"finished"===this.playState&&(s=l);const o=s/i;let h=Math.floor(o),p=o%1;!p&&o>=1&&(p=1),1===p&&h--;const f=h%2;("reverse"===c||"alternate"===c&&f||"alternate-reverse"===c&&!f)&&(p=1-p);const d=u(s>=l?1:Math.min(p,1));t(d);"finished"===this.playState||s>=l+a?(this.playState="finished",null===(n=this.resolve)||void 0===n||n.call(this,d)):"idle"!==this.playState&&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)}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}}function Z(t){return m[t]&&(t=m[t]),S(t)?b(t):t}const _=(t,e)=>{e=Z(e);let n=T(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!n&&0!==n){const t=g.get(e);t&&(n=t.initialValue)}return n};function J(t,e,n,i={}){let r,{duration:a=H.duration,delay:s=H.delay,endDelay:o=H.endDelay,repeat:c=H.repeat,easing:l=H.easing,direction:f,offset:d,allowWebkitAcceleration:v=!1}=i;const y=u(t);let b=$.waapi(),w=p;const E=S(e);E&&((t,e)=>{m[e]&&(e=m[e]);const{transforms:n}=u(t);h(n,e),t.style.transform=x(n)})(t,e);const O=Z(e),A=g.get(O);return function(t){if(t)try{"finished"!==t.playState&&t.commitStyles(),t.cancel()}catch(t){}}(y.animations[O]),()=>{const e=()=>{var e,n;return null!==(n=null!==(e=_(t,O))&&void 0!==e?e:null==A?void 0:A.initialValue)&&void 0!==n?n:0};let u=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),e);if(k(l)){const t=l.createAnimation(u,e,E,O,y);l=t.easing,void 0!==t.keyframes&&(u=t.keyframes),void 0!==t.duration&&(a=t.duration)}if(T(O)?(w=((t,e)=>n=>t.style.setProperty(e,n))(t,O),$.cssRegisterProperty()?function(t){if(!j.has(t)){j.add(t);try{const{syntax:e,initialValue:n}=g.has(t)?g.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}(O):b=!1):w=((t,e)=>n=>t.style[e]=n)(t,O),b){A&&(u=u.map((t=>M(t)?A.toDefaultUnit(t):t))),$.partialKeyframes()||1!==u.length||u.unshift(e());const n={delay:P(s),duration:P(a),endDelay:P(o),easing:V(l)?void 0:D(l),direction:f,iterations:c+1,fill:"both"};r=t.animate({[O]:u,offset:d,easing:V(l)?l.map(D):void 0},n),r.finished||(r.finished=new Promise(((t,e)=>{r.onfinish=t,r.oncancel=e})));const i=u[u.length-1];r.finished.then((()=>{w(i),r.cancel()})).catch(p),v||(r.playbackRate=1.000001)}else if(E&&u.every(M)){if(1===u.length&&u.unshift(parseFloat(e())),A){const t=w;w=e=>t(A.toDefaultUnit(e))}r=new Y(w,u,Object.assign(Object.assign({},i),{duration:a,easing:l}))}else{const t=u[u.length-1];w(A&&M(t)?A.toDefaultUnit(t):t)}return y.animations[O]=r,null==r||r.finished.then((()=>{y.animations[O]=void 0,y.generators[O]=void 0,y.prevGeneratorState[O]=void 0})).catch(p),r}}const Q=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):Object.assign({},t);var tt=function(){};function et(t,e){return function(t){return"object"==typeof t}(t)?t:t&&e?e[t]:void 0}let nt;function it(){if(!nt)return;const t=nt.sort(at).map(st);t.forEach(ot),t.forEach(ot),nt=void 0}function rt(t){nt?h(nt,t):(nt=[t],requestAnimationFrame(it))}"production"!==process.env.NODE_ENV&&(tt=function(t,e){if(!t)throw new Error(e)});const at=(t,e)=>t.getDepth()-e.getDepth(),st=t=>t.animateUpdates(),ot=t=>t.next(),ct=(t,e)=>new CustomEvent(t,{detail:{target:e}});function lt(t,e,n){t.dispatchEvent(new CustomEvent(e,{detail:{originalEvent:n}}))}function ut(t,e,n){t.dispatchEvent(new CustomEvent(e,{detail:{originalEntry:n}}))}const ht=(t,e,n)=>i=>{i.pointerType&&"mouse"!==i.pointerType||(n(),lt(t,e,i))},pt={inView:{isActive:t=>Boolean(t.inView),subscribe:(t,{enable:e,disable:n})=>{let i=!1;if("undefined"!=typeof IntersectionObserver){const r=new IntersectionObserver((([r])=>{!i&&r.isIntersecting?(e(),ut(t,"viewenter",r)):i&&!r.isIntersecting&&(n(),ut(t,"viewleave",r)),i=r.isIntersecting}));return r.observe(t),()=>{r.unobserve(t),r.disconnect()}}return e(),()=>{}}},hover:{isActive:t=>Boolean(t.hover),subscribe:(t,{enable:e,disable:n})=>{const i=ht(t,"hoverstart",e),r=ht(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(),lt(t,"pressend",e),window.removeEventListener("pointerup",i)},r=n=>{e(),lt(t,"pressstart",n),window.addEventListener("pointerup",i)};return t.addEventListener("pointerdown",r),()=>{t.removeEventListener("pointerdown",r),window.removeEventListener("pointerup",i)}}}},ft=["initial","animate",...Object.keys(pt),"exit"],dt=new WeakMap;function mt(t={},e){let n,i=e?e.getDepth()+1:0;const r={initial:!0,animate:!0},a={},s={};for(const n of ft)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(et(t[o]||s[o],t.variants)||{},["transition"]);const u=Object.assign({},l);const h=(t,e)=>()=>{r[t]=e,rt(d)},f=()=>{for(const e in pt){const i=pt[e].isActive(t),r=a[e];i&&!r?a[e]=pt[e].subscribe(n,{enable:h(e,!0),disable:h(e,!1)}):!i&&r&&(r(),delete a[e])}},d={update:e=>{n&&(t=e,f(),rt(d))},setActive:(t,e)=>n?(r[t]=e,rt(d),new Promise((t=>{setTimeout((()=>t()),100)}))):Promise.resolve(),animateUpdates:function*(){var e,i;const a=l;l={};const s={},o={},c={};for(const n of ft){if(!r[n])continue;const a=et(t[n]);if(a){s[n]=a;for(const r in a)"transition"!==r&&(l[r]=a[r],c[r]=Q(null!==(i=null!==(e=a.transition)&&void 0!==e?e:t.transition)&&void 0!==i?i:{},r),o[r]=n)}}const h=new Set([...Object.keys(l),...Object.keys(a)]),f=[];h.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]=_(n,t)),f.push(J(n,t,l[t],c[t])))})),yield;const d=f.map((t=>t())).filter(Boolean);if(!d.length)return;const m=l;n.dispatchEvent(ct("motionstart",m)),Promise.all(d.map((t=>t.finished))).then((()=>{n.dispatchEvent(ct("motioncomplete",m))})).catch(p)},getDepth:()=>i,getTarget:()=>l,getOptions:()=>t,getContext:()=>s,mount:t=>(tt(Boolean(t),"Animation state must be mounted with valid Element"),n=t,dt.set(n,d),f(),()=>{dt.delete(n),function(t){nt&&function(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}(nt,t)}(d);for(const t in a)a[t]()}),isMounted:()=>Boolean(n)};return d}const vt=e(void 0);function yt(e){return i((function(i,l){var{initial:u,animate:h,press:p,hover:f,inView:d,variants:v,style:y,transition:w,onMotionStart:E,onMotionComplete:O,onHoverStart:A,onHoverEnd:T,onPressStart:j,onPressEnd:P,onViewEnter:V,onViewLeave:k}=i,D=c(i,["initial","animate","press","hover","inView","variants","style","transition","onMotionStart","onMotionComplete","onHoverStart","onHoverEnd","onPressStart","onPressEnd","onViewEnter","onViewLeave"]);const L={initial:u,animate:h,press:p,hover:f,inView:d,variants:v,transition:w},C=mt(L,r(vt)),U=a((()=>function(t){const e={},n=[];for(let i in t){const r=t[i];S(i)&&(m[i]&&(i=m[i]),n.push(i),i=b(i));let a=Array.isArray(r)?r[0]:r;const s=g.get(i);s&&(a=M(r)?s.toDefaultUnit(r):r),e[i]=a}return n.length&&(e.transform=x(n)),e}(C.getTarget())),[]),B=l||s(null);n((()=>C.mount(B.current)),[]),n((()=>C.update(L))),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()))}}))}(B,{onMotionStart:E,onMotionComplete:O,onHoverStart:A,onHoverEnd:T,onPressStart:j,onPressEnd:P,onViewEnter:V,onViewLeave:k});const $=o(e,Object.assign(Object.assign({},D),{ref:B,style:Object.assign(Object.assign({},y),U)}));return t.createElement(vt.Provider,{value:C},$)}))}const gt=new Map,bt=new Proxy({},{get:(t,e)=>(!gt.has(e)&&gt.set(e,yt(e)),gt.get(e))});export{bt 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 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}const l=new WeakMap;function u(t){return l.has(t)||l.set(t,{transforms:[],animations:{},generators:{},prevGeneratorState:{}}),l.get(t)}function h(t,e){-1===t.indexOf(e)&&t.push(e)}const p=()=>{},f=t=>t,d=["","X","Y","Z"],m={x:"translateX",y:"translateY",z:"translateZ"},v={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},y={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:v,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:f},skew:v},g=new Map,b=t=>`--motion-${t}`,w=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{d.forEach((e=>{w.push(t+e),g.set(b(t+e),y[t])}))}));const E=(t,e)=>w.indexOf(t)-w.indexOf(e),O=new Set(w),S=t=>O.has(t),x=t=>t.sort(E).reduce(A,"").trim(),A=(t,e)=>`${t} ${e}(var(${b(e)}))`,j=t=>t.startsWith("--"),T=new Set;const M=t=>1e3*t,P=t=>"number"==typeof t,V=t=>Array.isArray(t)&&!P(t[0]),k=t=>"object"==typeof t&&Boolean(t.createAnimation),D=t=>(t=>Array.isArray(t)&&P(t[0]))(t)?L(t):t,L=([t,e,n,i])=>`cubic-bezier(${t}, ${e}, ${n}, ${i})`,C=t=>document.createElement("div").animate(t,{duration:.001}),U={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{C({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(C({opacity:[0,1]}).finished)},B={},$={};for(const t in U)$[t]=()=>(void 0===B[t]&&(B[t]=U[t]()),B[t]);const H={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},I=(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 f;const r=e=>function(t,e,n,i,r){let a,s,o=0;do{s=e+(n-e)/2,a=I(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:I(r(t),e,i)}const R=(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 a=0,s=1,o=r/t,Math.min(Math.max(o,a),s);var a,s,o},W={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)},q=/\((.*?)\)/;function z(t){if("function"==typeof t)return t;if(Array.isArray(t))return F(...t);if(W[t])return W[t];if(t.startsWith("steps")){const e=q.exec(t);if(e){const t=e[1].split(",");return R(parseFloat(t[0]),t[1].trim())}}return f}const G=(t,e,n)=>-n*t+n*e+t,K=(t,e,n)=>e-t==0?1:(n-t)/(e-t);function N(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const r=K(0,e,i);t.push(G(n,1,r))}}function X(t,e=function(t){const e=[0];return N(e,t-1),e}(t.length),n=f){const i=t.length,r=i-e.length;return r>0&&N(e,r),r=>{let a=0;for(;a<i-2&&!(r<e[a+1]);a++);let s=(o=K(e[a],e[a+1],r),Math.min(1,Math.max(o,0)));var o;const c=function(t,e){return V(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=c(s),G(t[a],t[a+1],s)}}class Y{constructor(t,e=[0,1],{easing:n=H.easing,duration:i=H.duration,delay:r=H.delay,endDelay:a=H.endDelay,repeat:s=H.repeat,offset:o,direction:c="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 l=i*(s+1);k(n)&&(n="ease");const u=X(e,o,V(n)?n.map(z):z(n));this.tick=e=>{var n;this.pauseTime&&(e=this.pauseTime);let s=(e-this.startTime)*this.rate;this.t=s,s/=1e3,s=Math.max(s-r,0),"finished"===this.playState&&(s=l);const o=s/i;let h=Math.floor(o),p=o%1;!p&&o>=1&&(p=1),1===p&&h--;const f=h%2;("reverse"===c||"alternate"===c&&f||"alternate-reverse"===c&&!f)&&(p=1-p);const d=u(s>=l?1:Math.min(p,1));t(d);"finished"===this.playState||s>=l+a?(this.playState="finished",null===(n=this.resolve)||void 0===n||n.call(this,d)):"idle"!==this.playState&&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)}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}}function Z(t){return m[t]&&(t=m[t]),S(t)?b(t):t}const _=(t,e)=>{e=Z(e);let n=j(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!n&&0!==n){const t=g.get(e);t&&(n=t.initialValue)}return n};function J(t,e,n,i={}){let r,{duration:a=H.duration,delay:s=H.delay,endDelay:o=H.endDelay,repeat:c=H.repeat,easing:l=H.easing,direction:f,offset:d,allowWebkitAcceleration:v=!1}=i;const y=u(t);let b=$.waapi(),w=p;const E=S(e);E&&((t,e)=>{m[e]&&(e=m[e]);const{transforms:n}=u(t);h(n,e),t.style.transform=x(n)})(t,e);const O=Z(e),A=g.get(O);return function(t){if(t)try{"finished"!==t.playState&&t.commitStyles(),t.cancel()}catch(t){}}(y.animations[O]),()=>{const e=()=>{var e,n;return null!==(n=null!==(e=_(t,O))&&void 0!==e?e:null==A?void 0:A.initialValue)&&void 0!==n?n:0};let u=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),e);if(k(l)){const t=l.createAnimation(u,e,E,O,y);l=t.easing,void 0!==t.keyframes&&(u=t.keyframes),void 0!==t.duration&&(a=t.duration)}if(j(O)?(w=((t,e)=>n=>t.style.setProperty(e,n))(t,O),$.cssRegisterProperty()?function(t){if(!T.has(t)){T.add(t);try{const{syntax:e,initialValue:n}=g.has(t)?g.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}(O):b=!1):w=((t,e)=>n=>t.style[e]=n)(t,O),b){A&&(u=u.map((t=>P(t)?A.toDefaultUnit(t):t))),$.partialKeyframes()||1!==u.length||u.unshift(e());const n={delay:M(s),duration:M(a),endDelay:M(o),easing:V(l)?void 0:D(l),direction:f,iterations:c+1,fill:"both"};r=t.animate({[O]:u,offset:d,easing:V(l)?l.map(D):void 0},n),r.finished||(r.finished=new Promise(((t,e)=>{r.onfinish=t,r.oncancel=e})));const i=u[u.length-1];r.finished.then((()=>{w(i),r.cancel()})).catch(p),v||(r.playbackRate=1.000001)}else if(E&&u.every(P)){if(1===u.length&&u.unshift(parseFloat(e())),A){const t=w;w=e=>t(A.toDefaultUnit(e))}r=new Y(w,u,Object.assign(Object.assign({},i),{duration:a,easing:l}))}else{const t=u[u.length-1];w(A&&P(t)?A.toDefaultUnit(t):t)}return y.animations[O]=r,null==r||r.finished.then((()=>{y.animations[O]=void 0,y.generators[O]=void 0,y.prevGeneratorState[O]=void 0})).catch(p),r}}const Q=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):Object.assign({},t);var tt=function(){};function et(t,e){return function(t){return"object"==typeof t}(t)?t:t&&e?e[t]:void 0}let nt;function it(){if(!nt)return;const t=nt.sort(at).map(st);t.forEach(ot),t.forEach(ot),nt=void 0}function rt(t){nt?h(nt,t):(nt=[t],requestAnimationFrame(it))}"production"!==process.env.NODE_ENV&&(tt=function(t,e){if(!t)throw new Error(e)});const at=(t,e)=>t.getDepth()-e.getDepth(),st=t=>t.animateUpdates(),ot=t=>t.next(),ct=(t,e)=>new CustomEvent(t,{detail:{target:e}});function lt(t,e,n){t.dispatchEvent(new CustomEvent(e,{detail:{originalEvent:n}}))}function ut(t,e,n){t.dispatchEvent(new CustomEvent(e,{detail:{originalEntry:n}}))}const ht=(t,e,n)=>i=>{i.pointerType&&"mouse"!==i.pointerType||(n(),lt(t,e,i))},pt={inView:{isActive:t=>Boolean(t.inView),subscribe:(t,{enable:e,disable:n})=>{let i=!1;if("undefined"!=typeof IntersectionObserver){const r=new IntersectionObserver((([r])=>{!i&&r.isIntersecting?(e(),ut(t,"viewenter",r)):i&&!r.isIntersecting&&(n(),ut(t,"viewleave",r)),i=r.isIntersecting}));return r.observe(t),()=>{r.unobserve(t),r.disconnect()}}return e(),()=>{}}},hover:{isActive:t=>Boolean(t.hover),subscribe:(t,{enable:e,disable:n})=>{const i=ht(t,"hoverstart",e),r=ht(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(),lt(t,"pressend",e),window.removeEventListener("pointerup",i)},r=n=>{e(),lt(t,"pressstart",n),window.addEventListener("pointerup",i)};return t.addEventListener("pointerdown",r),()=>{t.removeEventListener("pointerdown",r),window.removeEventListener("pointerup",i)}}}},ft=["initial","animate",...Object.keys(pt),"exit"],dt=new WeakMap;function mt(t={},e){let n,i=e?e.getDepth()+1:0;const r={initial:!0,animate:!0},a={},s={};for(const n of ft)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(et(t[o]||s[o],t.variants)||{},["transition"]);const u=Object.assign({},l);const h=(t,e)=>()=>{r[t]=e,rt(d)},f=()=>{for(const e in pt){const i=pt[e].isActive(t),r=a[e];i&&!r?a[e]=pt[e].subscribe(n,{enable:h(e,!0),disable:h(e,!1)}):!i&&r&&(r(),delete a[e])}},d={update:e=>{n&&(t=e,f(),rt(d))},setActive:(t,e)=>{n&&(r[t]=e,rt(d))},animateUpdates:function*(){var e,i;const a=l;l={};const s={},o={},c={};for(const n of ft){if(!r[n])continue;const a=et(t[n]);if(a){s[n]=a;for(const r in a)"transition"!==r&&(l[r]=a[r],c[r]=Q(null!==(i=null!==(e=a.transition)&&void 0!==e?e:t.transition)&&void 0!==i?i:{},r),o[r]=n)}}const h=new Set([...Object.keys(l),...Object.keys(a)]),f=[];h.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]=_(n,t)),f.push(J(n,t,l[t],c[t])))})),yield;const d=f.map((t=>t())).filter(Boolean);if(!d.length)return;const m=l;n.dispatchEvent(ct("motionstart",m)),Promise.all(d.map((t=>t.finished))).then((()=>{n.dispatchEvent(ct("motioncomplete",m))})).catch(p)},getDepth:()=>i,getTarget:()=>l,getOptions:()=>t,getContext:()=>s,mount:t=>(tt(Boolean(t),"Animation state must be mounted with valid Element"),n=t,dt.set(n,d),f(),()=>{dt.delete(n),function(t){nt&&function(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}(nt,t)}(d);for(const t in a)a[t]()}),isMounted:()=>Boolean(n)};return d}const vt=e(void 0);function yt(e){return i((function(i,l){var{initial:u,animate:h,press:p,hover:f,inView:d,variants:v,style:y,transition:w,onMotionStart:E,onMotionComplete:O,onHoverStart:A,onHoverEnd:j,onPressStart:T,onPressEnd:M,onViewEnter:V,onViewLeave:k}=i,D=c(i,["initial","animate","press","hover","inView","variants","style","transition","onMotionStart","onMotionComplete","onHoverStart","onHoverEnd","onPressStart","onPressEnd","onViewEnter","onViewLeave"]);const L={initial:u,animate:h,press:p,hover:f,inView:d,variants:v,transition:w},C=mt(L,r(vt)),U=a((()=>function(t){const e={},n=[];for(let i in t){const r=t[i];S(i)&&(m[i]&&(i=m[i]),n.push(i),i=b(i));let a=Array.isArray(r)?r[0]:r;const s=g.get(i);s&&(a=P(r)?s.toDefaultUnit(r):r),e[i]=a}return n.length&&(e.transform=x(n)),e}(C.getTarget())),[]),B=l||s(null);n((()=>C.mount(B.current)),[]),n((()=>C.update(L))),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()))}}))}(B,{onMotionStart:E,onMotionComplete:O,onHoverStart:A,onHoverEnd:j,onPressStart:T,onPressEnd:M,onViewEnter:V,onViewLeave:k});const $=o(e,Object.assign(Object.assign({},D),{ref:B,style:Object.assign(Object.assign({},y),U)}));return t.createElement(vt.Provider,{value:C},$)}))}const gt=new Map,bt=new Proxy({},{get:(t,e)=>(!gt.has(e)&&gt.set(e,yt(e)),gt.get(e))});export{bt as motion};

6

package.json
{
"name": "@motionone/react",
"version": "10.5.0-alpha.5",
"version": "10.5.0-beta.0",
"description": "A tiny, performant animation library for React",

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

"dependencies": {
"@motionone/dom": "^10.5.0-alpha.5",
"@motionone/dom": "^10.5.0-beta.0",
"hey-listen": "^1.0.8",

@@ -49,3 +49,3 @@ "tslib": "^2.3.1"

],
"gitHead": "894acfccc5cfcdaf4dbd8dbbcf3bfb9983b41635"
"gitHead": "96e3017ce1d664f6cb03a62c9f215347218fd918"
}
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