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.11.0 to 10.11.1

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

6

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

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

"dependencies": {
"@motionone/dom": "^10.11.0",
"@motionone/dom": "^10.11.1",
"hey-listen": "^1.0.8",

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

],
"gitHead": "d6306f38611747ab6ad98739f58b4db017be5a5b"
"gitHead": "25a8e264f860ca7b52f857fa48d1242542699542"
}
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