framer-motion
Version:
A simple and powerful JavaScript animation library
2 lines (1 loc) • 9.7 kB
JavaScript
const t=(t,r,e)=>e>r?r:e<t?t:e;function r(t){return null!==t&&"object"==typeof t&&"function"==typeof t.start}function e(t){return"string"==typeof t||Array.isArray(t)}const s=["animate","whileInView","whileFocus","whileHover","whileTap","whileDrag","exit"],a=["initial",...s];function n(t){return r(t.animate)||a.some(r=>e(t[r]))}function o(t){return Boolean(n(t)||t.variants)}const i=t=>r=>"string"==typeof r&&r.startsWith(t),f=i("--"),l=i("var(--"),d=t=>!!l(t)&&c.test(t.split("/*")[0].trim()),c=/var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu,p={test:t=>"number"==typeof t,parse:parseFloat,transform:t=>t},u={...p,transform:r=>t(0,1,r)},g={...p,default:1},m=t=>Math.round(1e5*t)/1e5,h=/-?(?:\d+(?:\.\d+)?|\.\d+)/gu;const y=/^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu,b=(t,r)=>e=>Boolean("string"==typeof e&&y.test(e)&&e.startsWith(t)||r&&!function(t){return null==t}(e)&&Object.prototype.hasOwnProperty.call(e,r)),v=(t,r,e)=>s=>{if("string"!=typeof s)return s;const[a,n,o,i]=s.match(h);return{[t]:parseFloat(a),[r]:parseFloat(n),[e]:parseFloat(o),alpha:void 0!==i?parseFloat(i):1}},w={...p,transform:r=>Math.round((r=>t(0,255,r))(r))},x={test:b("rgb","red"),parse:v("red","green","blue"),transform:({red:t,green:r,blue:e,alpha:s=1})=>"rgba("+w.transform(t)+", "+w.transform(r)+", "+w.transform(e)+", "+m(u.transform(s))+")"};const B={test:b("#"),parse:function(t){let r="",e="",s="",a="";return t.length>5?(r=t.substring(1,3),e=t.substring(3,5),s=t.substring(5,7),a=t.substring(7,9)):(r=t.substring(1,2),e=t.substring(2,3),s=t.substring(3,4),a=t.substring(4,5),r+=r,e+=e,s+=s,a+=a),{red:parseInt(r,16),green:parseInt(e,16),blue:parseInt(s,16),alpha:a?parseInt(a,16)/255:1}},transform:x.transform},k=t=>({test:r=>"string"==typeof r&&r.endsWith(t)&&1===r.split(" ").length,parse:parseFloat,transform:r=>`${r}${t}`}),R=k("deg"),I=k("%"),S=k("px"),T=k("vh"),$=k("vw"),L=(()=>({...I,parse:t=>I.parse(t)/100,transform:t=>I.transform(100*t)}))(),O={test:b("hsl","hue"),parse:v("hue","saturation","lightness"),transform:({hue:t,saturation:r,lightness:e,alpha:s=1})=>"hsla("+Math.round(t)+", "+I.transform(m(r))+", "+I.transform(m(e))+", "+m(u.transform(s))+")"},F={test:t=>x.test(t)||B.test(t)||O.test(t),parse:t=>x.test(t)?x.parse(t):O.test(t)?O.parse(t):B.parse(t),transform:t=>"string"==typeof t?t:t.hasOwnProperty("red")?x.transform(t):O.transform(t),getAnimatableNone:t=>{const r=F.parse(t);return r.alpha=0,F.transform(r)}},W=/(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;const X="number",Y="color",E=/var\s*\(\s*--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)|#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\)|-?(?:\d+(?:\.\d+)?|\.\d+)/giu;function P(t){const r=t.toString(),e=[],s={color:[],number:[],var:[]},a=[];let n=0;const o=r.replace(E,t=>(F.test(t)?(s.color.push(n),a.push(Y),e.push(F.parse(t))):t.startsWith("var(")?(s.var.push(n),a.push("var"),e.push(t)):(s.number.push(n),a.push(X),e.push(parseFloat(t))),++n,"${}")).split("${}");return{values:e,split:o,indexes:s,types:a}}function A(t){return P(t).values}function Z(t){const{split:r,types:e}=P(t),s=r.length;return t=>{let a="";for(let n=0;n<s;n++)if(a+=r[n],void 0!==t[n]){const r=e[n];a+=r===X?m(t[n]):r===Y?F.transform(t[n]):t[n]}return a}}const V=t=>"number"==typeof t?0:F.test(t)?F.getAnimatableNone(t):t;const D={test:function(t){return isNaN(t)&&"string"==typeof t&&(t.match(h)?.length||0)+(t.match(W)?.length||0)>0},parse:A,createTransformer:Z,getAnimatableNone:function(t){const r=A(t);return Z(t)(r.map(V))}},H=(t,r,e)=>t+(r-t)*e,z=["transformPerspective","x","y","z","translateX","translateY","translateZ","scale","scaleX","scaleY","rotate","rotateX","rotateY","rotateZ","skew","skewX","skewY"],C=(()=>new Set(z))(),M={...p,transform:Math.round},N={borderWidth:S,borderTopWidth:S,borderRightWidth:S,borderBottomWidth:S,borderLeftWidth:S,borderRadius:S,radius:S,borderTopLeftRadius:S,borderTopRightRadius:S,borderBottomRightRadius:S,borderBottomLeftRadius:S,width:S,maxWidth:S,height:S,maxHeight:S,top:S,right:S,bottom:S,left:S,inset:S,insetBlock:S,insetBlockStart:S,insetBlockEnd:S,insetInline:S,insetInlineStart:S,insetInlineEnd:S,padding:S,paddingTop:S,paddingRight:S,paddingBottom:S,paddingLeft:S,paddingBlock:S,paddingBlockStart:S,paddingBlockEnd:S,paddingInline:S,paddingInlineStart:S,paddingInlineEnd:S,margin:S,marginTop:S,marginRight:S,marginBottom:S,marginLeft:S,marginBlock:S,marginBlockStart:S,marginBlockEnd:S,marginInline:S,marginInlineStart:S,marginInlineEnd:S,backgroundPositionX:S,backgroundPositionY:S,...{rotate:R,rotateX:R,rotateY:R,rotateZ:R,scale:g,scaleX:g,scaleY:g,scaleZ:g,skew:R,skewX:R,skewY:R,distance:S,translateX:S,translateY:S,translateZ:S,x:S,y:S,z:S,perspective:S,transformPerspective:S,opacity:u,originX:L,originY:L,originZ:S},zIndex:M,fillOpacity:u,strokeOpacity:u,numOctaves:M},j=(t,r)=>r&&"number"==typeof t?r.transform(t):t,q=t=>Boolean(t&&t.getVelocity);function G(t,r){return r.max===r.min?0:t/(r.max-r.min)*100}const J={correct:(t,r)=>{if(!r.target)return t;if("string"==typeof t){if(!S.test(t))return t;t=parseFloat(t)}return`${G(t,r.target.x)}% ${G(t,r.target.y)}%`}},K={correct:(t,{treeScale:r,projectionDelta:e})=>{const s=t,a=D.parse(t);if(a.length>5)return s;const n=D.createTransformer(t),o="number"!=typeof a[0]?1:0,i=e.x.scale*r.x,f=e.y.scale*r.y;a[0+o]/=i,a[1+o]/=f;const l=H(i,f,.5);return"number"==typeof a[2+o]&&(a[2+o]/=l),"number"==typeof a[3+o]&&(a[3+o]/=l),n(a)}},U={borderRadius:{...J,applyTo:["borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"]},borderTopLeftRadius:J,borderTopRightRadius:J,borderBottomLeftRadius:J,borderBottomRightRadius:J,boxShadow:K};function Q(t,{layout:r,layoutId:e}){return C.has(t)||t.startsWith("origin")||(r||void 0!==e)&&(!!U[t]||"opacity"===t)}const _={x:"translateX",y:"translateY",z:"translateZ",transformPerspective:"perspective"},tt=z.length;function rt(t,r,e){const{style:s,vars:a,transformOrigin:n}=t;let o=!1,i=!1;for(const t in r){const e=r[t];if(C.has(t))o=!0;else if(f(t))a[t]=e;else{const r=j(e,N[t]);t.startsWith("origin")?(i=!0,n[t]=r):s[t]=r}}if(r.transform||(o||e?s.transform=function(t,r,e){let s="",a=!0;for(let n=0;n<tt;n++){const o=z[n],i=t[o];if(void 0===i)continue;let f=!0;if(f="number"==typeof i?i===(o.startsWith("scale")?1:0):0===parseFloat(i),!f||e){const t=j(i,N[o]);f||(a=!1,s+=`${_[o]||o}(${t}) `),e&&(r[o]=t)}}return s=s.trim(),e?s=e(r,a?"":s):a&&(s="none"),s}(r,t.transform,e):s.transform&&(s.transform="none")),i){const{originX:t="50%",originY:r="50%",originZ:e=0}=n;s.transformOrigin=`${t} ${r} ${e}`}}const et={offset:"stroke-dashoffset",array:"stroke-dasharray"},st={offset:"strokeDashoffset",array:"strokeDasharray"};const at=["offsetDistance","offsetPath","offsetRotate","offsetAnchor"];function nt(t,{attrX:r,attrY:e,attrScale:s,pathLength:a,pathSpacing:n=1,pathOffset:o=0,...i},f,l,d){if(rt(t,i,l),f)return void(t.style.viewBox&&(t.attrs.viewBox=t.style.viewBox));t.attrs=t.style,t.style={};const{attrs:c,style:p}=t;c.transform&&(p.transform=c.transform,delete c.transform),(p.transform||c.transformOrigin)&&(p.transformOrigin=c.transformOrigin??"50% 50%",delete c.transformOrigin),p.transform&&(p.transformBox=d?.transformBox??"fill-box",delete c.transformBox);for(const t of at)void 0!==c[t]&&(p[t]=c[t],delete c[t]);void 0!==r&&(c.x=r),void 0!==e&&(c.y=e),void 0!==s&&(c.scale=s),void 0!==a&&function(t,r,e=1,s=0,a=!0){t.pathLength=1;const n=a?et:st;t[n.offset]=S.transform(-s);const o=S.transform(r),i=S.transform(e);t[n.array]=`${o} ${i}`}(c,a,n,o,!1)}const ot=t=>"string"==typeof t&&"svg"===t.toLowerCase(),it=["animate","circle","defs","desc","ellipse","g","image","line","filter","marker","mask","metadata","path","pattern","polygon","polyline","rect","stop","switch","symbol","svg","text","tspan","use","view"];function ft(t){return"string"==typeof t&&!t.includes("-")&&!!(it.indexOf(t)>-1||/[A-Z]/u.test(t))}function lt(t){const r=[{},{}];return t?.values.forEach((t,e)=>{r[0][e]=t.get(),r[1][e]=t.getVelocity()}),r}function dt(t,r,e,s){if("function"==typeof r){const[a,n]=lt(s);r=r(void 0!==e?e:t.custom,a,n)}if("string"==typeof r&&(r=t.variants&&t.variants[r]),"function"==typeof r){const[a,n]=lt(s);r=r(void 0!==e?e:t.custom,a,n)}return r}function ct(t,r,e){const{style:s}=t,a={};for(const n in s)(q(s[n])||r.style&&q(r.style[n])||Q(n,t)||void 0!==e?.getValue(n)?.liveStyle)&&(a[n]=s[n]);return a}function pt(t,r,e){const s=ct(t,r,e);for(const e in t)if(q(t[e])||q(r[e])){s[-1!==z.indexOf(e)?"attr"+e.charAt(0).toUpperCase()+e.substring(1):e]=t[e]}return s}const ut="undefined"!=typeof window,gt={animation:["animate","variants","whileHover","whileTap","exit","whileInView","whileFocus","whileDrag"],exit:["exit"],drag:["drag","dragControls"],focus:["whileFocus"],hover:["whileHover","onHoverStart","onHoverEnd"],tap:["whileTap","onTap","onTapStart","onTapCancel"],pan:["onPan","onPanStart","onPanSessionStart","onPanEnd"],inView:["whileInView","onViewportEnter","onViewportLeave"],layout:["layout","layoutId"]},mt={};for(const t in gt)mt[t]={isEnabled:r=>gt[t].some(t=>!!r[t])};const ht=t=>t.replace(/([a-z])([A-Z])/gu,"$1-$2").toLowerCase(),yt="data-"+ht("framerAppearId");export{S as A,z as B,I as C,R as D,$ as E,T as F,h as G,N as H,C as I,a as J,s as K,f as L,ht as M,e as a,q as b,Q as c,rt as d,nt as e,ot as f,ft as g,o as h,n as i,r as j,pt as k,ut as l,mt as m,H as n,yt as o,x as p,O as q,dt as r,ct as s,B as t,d as u,F as v,D as w,P as x,t as y,p as z};