UNPKG

framer-motion

Version:

A simple and powerful JavaScript animation library

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