UNPKG

framer-motion

Version:

A simple and powerful JavaScript animation library

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