UNPKG

framer-motion

Version:

A simple and powerful JavaScript animation library

2 lines (1 loc) • 7.96 kB
const t=t=>t;function e(t){return null!==t&&"object"==typeof t&&"function"==typeof t.start}function s(t){return"string"==typeof t||Array.isArray(t)}const r=["animate","whileInView","whileFocus","whileHover","whileTap","whileDrag","exit"],a=["initial",...r];function n(t){return e(t.animate)||a.some((e=>s(t[e])))}function o(t){return Boolean(n(t)||t.variants)}const i="undefined"!=typeof window,c={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"]},l={};for(const t in c)l[t]={isEnabled:e=>c[t].some((t=>!!e[t]))};const f={value:null,addProjectionMetrics:null},d=["read","resolveKeyframes","update","preRender","render","postRender"];function u(t,e){let s=!1,r=!0;const a={delta:0,timestamp:0,isProcessing:!1},n=()=>s=!0,o=d.reduce(((t,s)=>(t[s]=function(t,e){let s=new Set,r=new Set,a=!1,n=!1;const o=new WeakSet;let i={delta:0,timestamp:0,isProcessing:!1},c=0;function l(e){o.has(e)&&(d.schedule(e),t()),c++,e(i)}const d={schedule:(t,e=!1,n=!1)=>{const i=n&&a?s:r;return e&&o.add(t),i.has(t)||i.add(t),t},cancel:t=>{r.delete(t),o.delete(t)},process:t=>{i=t,a?n=!0:(a=!0,[s,r]=[r,s],s.forEach(l),e&&f.value&&f.value.frameloop[e].push(c),c=0,s.clear(),a=!1,n&&(n=!1,d.process(t)))}};return d}(n,e?s:void 0),t)),{}),{read:i,resolveKeyframes:c,update:l,preRender:u,render:p,postRender:m}=o,g=()=>{const n=performance.now();s=!1,a.delta=r?1e3/60:Math.max(Math.min(n-a.timestamp,40),1),a.timestamp=n,a.isProcessing=!0,i.process(a),c.process(a),l.process(a),u.process(a),p.process(a),m.process(a),a.isProcessing=!1,s&&e&&(r=!1,t(g))};return{schedule:d.reduce(((e,n)=>{const i=o[n];return e[n]=(e,n=!1,o=!1)=>(s||(s=!0,r=!0,a.isProcessing||t(g)),i.schedule(e,n,o)),e}),{}),cancel:t=>{for(let e=0;e<d.length;e++)o[d[e]].cancel(t)},state:a,steps:o}}const{schedule:p,cancel:m,state:g,steps:h}=u("undefined"!=typeof requestAnimationFrame?requestAnimationFrame:t,!0),y=t=>t.replace(/([a-z])([A-Z])/gu,"$1-$2").toLowerCase(),v="data-"+y("framerAppearId"),w=t=>e=>"string"==typeof e&&e.startsWith(t),x=w("--"),b=w("var(--"),k=t=>!!b(t)&&B.test(t.split("/*")[0].trim()),B=/var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu,P={},R=["transformPerspective","x","y","z","translateX","translateY","translateZ","scale","scaleX","scaleY","rotate","rotateX","rotateY","rotateZ","skew","skewX","skewY"],S=new Set(R);function X(t,{layout:e,layoutId:s}){return S.has(t)||t.startsWith("origin")||(e||void 0!==s)&&(!!P[t]||"opacity"===t)}const Y=t=>Boolean(t&&t.getVelocity),A=(t,e)=>e&&"number"==typeof t?e.transform(t):t,L=(t,e,s)=>s>e?e:s<t?t:s,$={test:t=>"number"==typeof t,parse:parseFloat,transform:t=>t},O={...$,transform:t=>L(0,1,t)},T={...$,default:1},W=t=>({test:e=>"string"==typeof e&&e.endsWith(t)&&1===e.split(" ").length,parse:parseFloat,transform:e=>`${e}${t}`}),V=W("deg"),C=W("%"),F=W("px"),Z=W("vh"),E=W("vw"),H={...C,parse:t=>C.parse(t)/100,transform:t=>C.transform(100*t)},I={borderWidth:F,borderTopWidth:F,borderRightWidth:F,borderBottomWidth:F,borderLeftWidth:F,borderRadius:F,radius:F,borderTopLeftRadius:F,borderTopRightRadius:F,borderBottomRightRadius:F,borderBottomLeftRadius:F,width:F,maxWidth:F,height:F,maxHeight:F,top:F,right:F,bottom:F,left:F,padding:F,paddingTop:F,paddingRight:F,paddingBottom:F,paddingLeft:F,margin:F,marginTop:F,marginRight:F,marginBottom:F,marginLeft:F,backgroundPositionX:F,backgroundPositionY:F},j={rotate:V,rotateX:V,rotateY:V,rotateZ:V,scale:T,scaleX:T,scaleY:T,scaleZ:T,skew:V,skewX:V,skewY:V,distance:F,translateX:F,translateY:F,translateZ:F,x:F,y:F,z:F,perspective:F,transformPerspective:F,opacity:O,originX:H,originY:H,originZ:F},z={...$,transform:Math.round},D={...I,...j,zIndex:z,size:F,fillOpacity:O,strokeOpacity:O,numOctaves:z},M={x:"translateX",y:"translateY",z:"translateZ",transformPerspective:"perspective"},q=R.length;function K(t,e,s){const{style:r,vars:a,transformOrigin:n}=t;let o=!1,i=!1;for(const t in e){const s=e[t];if(S.has(t))o=!0;else if(x(t))a[t]=s;else{const e=A(s,D[t]);t.startsWith("origin")?(i=!0,n[t]=e):r[t]=e}}if(e.transform||(o||s?r.transform=function(t,e,s){let r="",a=!0;for(let n=0;n<q;n++){const o=R[n],i=t[o];if(void 0===i)continue;let c=!0;if(c="number"==typeof i?i===(o.startsWith("scale")?1:0):0===parseFloat(i),!c||s){const t=A(i,D[o]);c||(a=!1,r+=`${M[o]||o}(${t}) `),s&&(e[o]=t)}}return r=r.trim(),s?r=s(e,a?"":r):a&&(r="none"),r}(e,t.transform,s):r.transform&&(r.transform="none")),i){const{originX:t="50%",originY:e="50%",originZ:s=0}=n;r.transformOrigin=`${t} ${e} ${s}`}}const U=["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 G(t){return"string"==typeof t&&!t.includes("-")&&!!(U.indexOf(t)>-1||/[A-Z]/u.test(t))}const J={offset:"stroke-dashoffset",array:"stroke-dasharray"},N={offset:"strokeDashoffset",array:"strokeDasharray"};function Q(t,e,s){return"string"==typeof t?t:F.transform(e+s*t)}function _(t,{attrX:e,attrY:s,attrScale:r,originX:a,originY:n,pathLength:o,pathSpacing:i=1,pathOffset:c=0,...l},f,d){if(K(t,l,d),f)return void(t.style.viewBox&&(t.attrs.viewBox=t.style.viewBox));t.attrs=t.style,t.style={};const{attrs:u,style:p,dimensions:m}=t;u.transform&&(m&&(p.transform=u.transform),delete u.transform),m&&(void 0!==a||void 0!==n||p.transform)&&(p.transformOrigin=function(t,e,s){return`${Q(e,t.x,t.width)} ${Q(s,t.y,t.height)}`}(m,void 0!==a?a:.5,void 0!==n?n:.5)),void 0!==e&&(u.x=e),void 0!==s&&(u.y=s),void 0!==r&&(u.scale=r),void 0!==o&&function(t,e,s=1,r=0,a=!0){t.pathLength=1;const n=a?J:N;t[n.offset]=F.transform(-r);const o=F.transform(e),i=F.transform(s);t[n.array]=`${o} ${i}`}(u,o,i,c,!1)}const tt=t=>"string"==typeof t&&"svg"===t.toLowerCase();function et(t){const e=[{},{}];return t?.values.forEach(((t,s)=>{e[0][s]=t.get(),e[1][s]=t.getVelocity()})),e}function st(t,e,s,r){if("function"==typeof e){const[a,n]=et(r);e=e(void 0!==s?s:t.custom,a,n)}if("string"==typeof e&&(e=t.variants&&t.variants[e]),"function"==typeof e){const[a,n]=et(r);e=e(void 0!==s?s:t.custom,a,n)}return e}const rt=t=>Array.isArray(t),at=t=>Boolean(t&&"object"==typeof t&&t.mix&&t.toValue),nt=t=>rt(t)?t[t.length-1]||0:t;function ot(t,e,s){const{style:r}=t,a={};for(const n in r)(Y(r[n])||e.style&&Y(e.style[n])||X(n,t)||void 0!==s?.getValue(n)?.liveStyle)&&(a[n]=r[n]);return a}function it(t,e){try{e.dimensions="function"==typeof t.getBBox?t.getBBox():t.getBoundingClientRect()}catch(t){e.dimensions={x:0,y:0,width:0,height:0}}}function ct(t,{style:e,vars:s},r,a){Object.assign(t.style,e,a&&a.getProjectionStyles(r));for(const e in s)t.style.setProperty(e,s[e])}const lt=new Set(["baseFrequency","diffuseConstant","kernelMatrix","kernelUnitLength","keySplines","keyTimes","limitingConeAngle","markerHeight","markerWidth","numOctaves","targetX","targetY","surfaceScale","specularConstant","specularExponent","stdDeviation","tableValues","viewBox","gradientTransform","pathLength","startOffset","textLength","lengthAdjust"]);function ft(t,e,s,r){ct(t,e,void 0,r);for(const s in e.attrs)t.setAttribute(lt.has(s)?s:y(s),e.attrs[s])}function dt(t,e,s){const r=ot(t,e,s);for(const s in t)if(Y(t[s])||Y(e[s])){r[-1!==R.indexOf(s)?"attr"+s.charAt(0).toUpperCase()+s.substring(1):s]=t[s]}return r}export{$ as A,O as B,L as C,C as D,D as E,F,k as G,V as H,E as I,Z as J,m as K,a as L,rt as M,r as N,ct as O,x as P,lt as Q,y as R,s as a,i as b,u as c,Y as d,X as e,l as f,K as g,_ as h,n as i,tt as j,G as k,at as l,o as m,e as n,v as o,dt as p,p as q,st as r,ot as s,S as t,it as u,ft as v,g as w,R as x,nt as y,t as z};