UNPKG

framer-motion

Version:

A simple and powerful JavaScript animation library

3 lines (2 loc) • 16.2 kB
import{jsxs as t,jsx as n}from"react/jsx-runtime";import{createContext as r,useContext as e,useMemo as o,Fragment as a,createElement as s,useRef as i,useInsertionEffect as u,useCallback as l,useLayoutEffect as c,useEffect as f,forwardRef as d}from"react";const p=(t,n,r)=>r>n?n:r<t?t:r,m=r({}),g=r({strict:!1}),h=r({transformPagePoint:t=>t,isStatic:!1,reducedMotion:"never"}),y=r({}),v=t=>Math.round(1e5*t)/1e5,b=(t=>n=>"string"==typeof n&&n.startsWith(t))("--"),w={test:t=>"number"==typeof t,parse:parseFloat,transform:t=>t},S={...w,transform:t=>p(0,1,t)},x={...w,default:1},R=/-?(?:\d+(?:\.\d+)?|\.\d+)/gu;const k=/^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu,B=(t,n)=>r=>Boolean("string"==typeof r&&k.test(r)&&r.startsWith(t)||n&&!function(t){return null==t}(r)&&Object.prototype.hasOwnProperty.call(r,n)),T=(t,n,r)=>e=>{if("string"!=typeof e)return e;const[o,a,s,i]=e.match(R);return{[t]:parseFloat(o),[n]:parseFloat(a),[r]:parseFloat(s),alpha:void 0!==i?parseFloat(i):1}},I={...w,transform:t=>Math.round((t=>p(0,255,t))(t))},A={test:B("rgb","red"),parse:T("red","green","blue"),transform:({red:t,green:n,blue:r,alpha:e=1})=>"rgba("+I.transform(t)+", "+I.transform(n)+", "+I.transform(r)+", "+v(S.transform(e))+")"};const M={test:B("#"),parse:function(t){let n="",r="",e="",o="";return t.length>5?(n=t.substring(1,3),r=t.substring(3,5),e=t.substring(5,7),o=t.substring(7,9)):(n=t.substring(1,2),r=t.substring(2,3),e=t.substring(3,4),o=t.substring(4,5),n+=n,r+=r,e+=e,o+=o),{red:parseInt(n,16),green:parseInt(r,16),blue:parseInt(e,16),alpha:o?parseInt(o,16)/255:1}},transform:A.transform},P=t=>({test:n=>"string"==typeof n&&n.endsWith(t)&&1===n.split(" ").length,parse:parseFloat,transform:n=>`${n}${t}`}),E=P("deg"),O=P("%"),W=P("px"),L=(()=>({...O,parse:t=>O.parse(t)/100,transform:t=>O.transform(100*t)}))(),C={test:B("hsl","hue"),parse:T("hue","saturation","lightness"),transform:({hue:t,saturation:n,lightness:r,alpha:e=1})=>"hsla("+Math.round(t)+", "+O.transform(v(n))+", "+O.transform(v(r))+", "+v(S.transform(e))+")"},j={test:t=>A.test(t)||M.test(t)||C.test(t),parse:t=>A.test(t)?A.parse(t):C.test(t)?C.parse(t):M.parse(t),transform:t=>"string"==typeof t?t:t.hasOwnProperty("red")?A.transform(t):C.transform(t),getAnimatableNone:t=>{const n=j.parse(t);return n.alpha=0,j.transform(n)}},V=new RegExp(R.source),$=new RegExp(/(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu.source,"i");const F="number",X="color",Y=/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 D(t){const n=t.toString(),r=[],e={color:[],number:[],var:[]},o=[];let a=0;const s=n.replace(Y,t=>(j.test(t)?(e.color.push(a),o.push(X),r.push(j.parse(t))):t.startsWith("var(")?(e.var.push(a),o.push("var"),r.push(t)):(e.number.push(a),o.push(F),r.push(parseFloat(t))),++a,"${}")).split("${}");return{values:r,split:s,indexes:e,types:o}}function H({split:t,types:n}){const r=t.length;return e=>{let o="";for(let a=0;a<r;a++)if(o+=t[a],void 0!==e[a]){const t=n[a];o+=t===F?v(e[a]):t===X?j.transform(e[a]):e[a]}return o}}const N=(t,n)=>{return"number"==typeof t?n?.trim().endsWith("/")?t:0:"number"==typeof(r=t)?0:j.test(r)?j.getAnimatableNone(r):r;var r};const Z={test:function(t){return isNaN(t)&&"string"==typeof t&&(V.test(t)||$.test(t))},parse:function(t){return D(t).values},createTransformer:function(t){return H(D(t))},getAnimatableNone:function(t){const n=D(t);return H(n)(n.values.map((t,r)=>N(t,n.split[r])))}},z={...w,transform:Math.round},U={borderWidth:W,borderTopWidth:W,borderRightWidth:W,borderBottomWidth:W,borderLeftWidth:W,borderRadius:W,borderTopLeftRadius:W,borderTopRightRadius:W,borderBottomRightRadius:W,borderBottomLeftRadius:W,width:W,maxWidth:W,height:W,maxHeight:W,top:W,right:W,bottom:W,left:W,inset:W,insetBlock:W,insetBlockStart:W,insetBlockEnd:W,insetInline:W,insetInlineStart:W,insetInlineEnd:W,padding:W,paddingTop:W,paddingRight:W,paddingBottom:W,paddingLeft:W,paddingBlock:W,paddingBlockStart:W,paddingBlockEnd:W,paddingInline:W,paddingInlineStart:W,paddingInlineEnd:W,margin:W,marginTop:W,marginRight:W,marginBottom:W,marginLeft:W,marginBlock:W,marginBlockStart:W,marginBlockEnd:W,marginInline:W,marginInlineStart:W,marginInlineEnd:W,fontSize:W,backgroundPositionX:W,backgroundPositionY:W,...{rotate:E,pathRotation:E,rotateX:E,rotateY:E,rotateZ:E,scale:x,scaleX:x,scaleY:x,scaleZ:x,skew:E,skewX:E,skewY:E,distance:W,translateX:W,translateY:W,translateZ:W,x:W,y:W,z:W,perspective:W,transformPerspective:W,opacity:S,originX:L,originY:L,originZ:W},zIndex:z,fillOpacity:S,strokeOpacity:S,numOctaves:z},_=["transformPerspective","x","y","z","translateX","translateY","translateZ","scale","scaleX","scaleY","rotate","rotateX","rotateY","rotateZ","skew","skewX","skewY"],q=(()=>new Set([..._,"pathRotation"]))();function G(t,n,r,e){if("function"==typeof n){const[r,e]=[{},{}];n=n(t.custom,r,e)}if("string"==typeof n&&(n=t.variants&&t.variants[n]),"function"==typeof n){const[r,e]=[{},{}];n=n(t.custom,r,e)}return n}const J=t=>Boolean(t&&t.getVelocity);const K="data-"+"framerAppearId".replace(/([A-Z])/g,t=>`-${t.toLowerCase()}`);const Q=(t,n)=>n&&"number"==typeof t?n.transform(t):t,tt={x:"translateX",y:"translateY",z:"translateZ",transformPerspective:"perspective"},nt=_.length;function rt(t,n,r){const{style:e,vars:o,transformOrigin:a}=t;let s=!1,i=!1;for(const t in n){const r=n[t];if(q.has(t))s=!0;else if(b(t))o[t]=r;else{const n=Q(r,U[t]);t.startsWith("origin")?(i=!0,a[t]=n):e[t]=n}}if(n.transform||(s||r?e.transform=function(t,n,r){let e="",o=!0;for(let a=0;a<nt;a++){const s=_[a],i=t[s];if(void 0===i)continue;let u=!0;if("number"==typeof i)u=i===(s.startsWith("scale")?1:0);else{const t=parseFloat(i);u=s.startsWith("scale")?1===t:0===t}if(!u||r){const t=Q(i,U[s]);u||(o=!1,e+=`${tt[s]||s}(${t}) `),r&&(n[s]=t)}}const a=t.pathRotation;return a&&(o=!1,e+=`rotate(${Q(a,U.pathRotation)}) `),e=e.trim(),r?e=r(n,o?"":e):o&&(e="none"),e}(n,t.transform,r):e.transform&&(e.transform="none")),i){const{originX:t="50%",originY:n="50%",originZ:r=0}=a;e.transformOrigin=`${t} ${n} ${r}`}}const et={offset:"stroke-dashoffset",array:"stroke-dasharray"},ot={offset:"strokeDashoffset",array:"strokeDasharray"};const at=["transform","opacity","offsetDistance","offsetPath","offsetRotate","offsetAnchor"];function st(t,{attrX:n,attrY:r,attrScale:e,pathLength:o,pathSpacing:a=1,pathOffset:s=0,...i},u,l,c){if(rt(t,i,l),u)return void(t.style.viewBox&&(t.attrs.viewBox=t.style.viewBox));t.attrs=t.style,t.style={};const{attrs:f,style:d}=t;for(const t of at)void 0!==f[t]&&(d[t]=f[t],delete f[t]);(d.transform||f.transformOrigin)&&(d.transformOrigin=f.transformOrigin??"50% 50%",delete f.transformOrigin),d.transform&&(d.transformBox=c?.transformBox??"fill-box",delete f.transformBox),void 0!==n&&(f.x=n),void 0!==r&&(f.y=r),void 0!==e&&(f.scale=e),void 0!==o&&function(t,n,r=1,e=0,o=!0){t.pathLength=1;const a=o?et:ot;t[a.offset]=""+-e,t[a.array]=`${n} ${r}`}(f,o,a,s,!1)}function it(t){return null!==t&&"object"==typeof t&&"function"==typeof t.start}function ut(t){return"string"==typeof t||Array.isArray(t)}const lt=["initial","animate","whileInView","whileFocus","whileHover","whileTap","whileDrag","exit"];function ct(t){if(it(t.animate))return!0;for(let n=0;n<lt.length;n++)if(ut(t[lt[n]]))return!0;return!1}let ft={};function dt(t,n){return n.max===n.min?0:t/(n.max-n.min)*100}const pt={correct:(t,n)=>{if(!n.target)return t;if("string"==typeof t){if(!W.test(t))return t;t=parseFloat(t)}return`${dt(t,n.target.x)}% ${dt(t,n.target.y)}%`}},mt={correct:(t,{treeScale:n,projectionDelta:r})=>{const e=t,o=Z.parse(t);if(o.length>5)return e;const a=Z.createTransformer(t),s="number"!=typeof o[0]?1:0,i=r.x.scale*n.x,u=r.y.scale*n.y;o[0+s]/=i,o[1+s]/=u;const l=(c=i)+(u-c)*.5;var c;return"number"==typeof o[2+s]&&(o[2+s]/=l),"number"==typeof o[3+s]&&(o[3+s]/=l),a(o)}},gt={borderRadius:{...pt,applyTo:["borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius"]},borderTopLeftRadius:pt,borderTopRightRadius:pt,borderBottomLeftRadius:pt,borderBottomRightRadius:pt,boxShadow:mt};function ht(t,{layout:n,layoutId:r}){return q.has(t)||t.startsWith("origin")||(n||void 0!==r)&&(!!gt[t]||"opacity"===t)}function yt(t,n,r){const e=t.style,o=n?.style,a={};if(!e)return a;for(const n in e)(J(e[n])||o&&J(o[n])||ht(n,t)||void 0!==r?.getValue(n)?.liveStyle)&&(a[n]=e[n]);return a}function vt(t){return J(t)?t.get():t}function bt(t){const{initial:n,animate:r}=function(t,n){if(ct(t)){const{initial:n,animate:r}=t;return{initial:!1===n||ut(n)?n:void 0,animate:ut(r)?r:void 0}}return!1!==t.inherit?n:{}}(t,e(y));return o(()=>({initial:n,animate:r}),[wt(n),wt(r)])}function wt(t){return Array.isArray(t)?t.join(" "):t}const St=()=>({style:{},transform:{},transformOrigin:{},vars:{}});function xt(t,n,r){for(const e in n)J(n[e])||ht(e,r)||(t[e]=n[e])}function Rt(t,n){const r={};return xt(r,t.style||{},t),Object.assign(r,function({transformTemplate:t},n){return o(()=>{const r={style:{},transform:{},transformOrigin:{},vars:{}};return rt(r,n,t),Object.assign({},r.vars,r.style)},[n])}(t,n)),r}function kt(t,n){const r={},e=Rt(t,n);return t.drag&&!1!==t.dragListener&&(r.draggable=!1,e.userSelect=e.WebkitUserSelect=e.WebkitTouchCallout="none",e.touchAction=!0===t.drag?"none":"pan-"+("x"===t.drag?"y":"x")),void 0===t.tabIndex&&(t.onTap||t.onTapStart||t.whileTap)&&(r.tabIndex=0),r.style=e,r}const Bt=()=>({style:{},transform:{},transformOrigin:{},vars:{},attrs:{}});function Tt(t,n,r,e){const a=o(()=>{const r={style:{},transform:{},transformOrigin:{},vars:{},attrs:{}};var o;return st(r,n,"string"==typeof(o=e)&&"svg"===o.toLowerCase(),t.transformTemplate,t.style),{...r.attrs,style:{...r.style}}},[n]);if(t.style){const n={};xt(n,t.style,t),a.style={...n,...a.style}}return a}const It=new Set(["animate","exit","variants","initial","style","values","variants","transition","transformTemplate","custom","inherit","onBeforeLayoutMeasure","onAnimationStart","onAnimationComplete","onUpdate","onDragStart","onDrag","onDragEnd","onMeasureDragConstraints","onDirectionLock","onDragTransitionEnd","_dragX","_dragY","onHoverStart","onHoverEnd","onViewportEnter","onViewportLeave","globalTapTarget","propagate","ignoreStrict","viewport"]);function At(t){return t.startsWith("while")||t.startsWith("drag")&&"draggable"!==t||t.startsWith("layout")||t.startsWith("onTap")||t.startsWith("onPan")||t.startsWith("onLayout")||It.has(t)}function Mt(t,n){return t.startsWith("on")?!At(t):n?.(t)??!At(t)}const Pt=["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 Et(t){return"string"==typeof t&&!t.includes("-")&&!!(Pt.indexOf(t)>-1||/[A-Z]/u.test(t))}function Ot(t,n,r,{latestValues:e},i,u=!1,l,c){const f=(l??Et(t)?Tt:kt)(n,e,i,t),d=function(t,n,r,e){const o={};for(const a in t)"values"===a&&"object"==typeof t.values||J(t[a])||(Mt(a,e)||!0===r&&At(a)||!n&&!At(a)||t.draggable&&a.startsWith("onDrag"))&&(o[a]=t[a]);return o}(n,"string"==typeof t,u,c),p=t!==a?{...d,...f,ref:r}:{},{children:m}=n,g=o(()=>J(m)?m.get():m,[m]);return s(t,{...p,children:g})}const Wt=r(null);function Lt(t,n,r,e){const o={},a=e(t,{});for(const t in a)o[t]=vt(a[t]);let{initial:s,animate:i}=t;const u=ct(t),l=function(t){return Boolean(ct(t)||t.variants)}(t);n&&l&&!u&&!1!==t.inherit&&(void 0===s&&(s=n.initial),void 0===i&&(i=n.animate));let c=!!r&&!1===r.initial;c=c||!1===s;const f=c?i:s;if(f&&"boolean"!=typeof f&&!it(f)){const n=Array.isArray(f)?f:[f];for(let r=0;r<n.length;r++){const e=G(t,n[r]);if(e){const{transitionEnd:t,transition:n,...r}=e;for(const t in r){let n=r[t];if(Array.isArray(n)){n=n[c?n.length-1:0]}null!==n&&(o[t]=n)}for(const n in t)o[n]=t[n]}}}return o}const Ct=t=>(n,r)=>{const o=e(y),a=e(Wt),s=()=>function({scrapeMotionValuesFromProps:t,createRenderState:n},r,e,o){return{latestValues:Lt(r,e,o,t),renderState:n()}}(t,n,o,a);return r?s():function(t){const n=i(null);return null===n.current&&(n.current=t()),n.current}(s)},jt=Ct({scrapeMotionValuesFromProps:yt,createRenderState:St}),Vt=Ct({scrapeMotionValuesFromProps:function(t,n,r){const e=yt(t,n,r);for(const r in t)if(J(t[r])||J(n[r])){e[-1!==_.indexOf(r)?"attr"+r.charAt(0).toUpperCase()+r.substring(1):r]=t[r]}return e},createRenderState:Bt}),$t={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"]};let Ft=!1;function Xt(){if(Ft)return;const t={};for(const n in $t)t[n]={isEnabled:t=>$t[n].some(n=>!!t[n])};ft=t,Ft=!0}function Yt(){return Xt(),ft}const Dt=Symbol.for("motionComponentSymbol");function Ht(t,n,r){const e=i(r);u(()=>{e.current=r});const o=i(null);return l(r=>{r&&t.onMount?.(r),n&&(r?n.mount(r):n.unmount());const a=e.current;if("function"==typeof a)if(r){const t=a(r);"function"==typeof t&&(o.current=t)}else o.current?(o.current(),o.current=null):a(r);else a&&(a.current=r)},[n])}const Nt=r({});function Zt(t){return t&&"object"==typeof t&&Object.prototype.hasOwnProperty.call(t,"current")}const zt="undefined"!=typeof window?c:f;function Ut(t,n,r,o,a,s){const{visualElement:l}=e(y),c=e(g),d=e(Wt),p=e(h),m=p.reducedMotion,v=p.skipAnimations,b=i(null),w=i(!1);o=o||c.renderer,!b.current&&o&&(b.current=o(t,{visualState:n,parent:l,props:r,presenceContext:d,blockInitialAnimation:!!d&&!1===d.initial,reducedMotionConfig:m,skipAnimations:v,isSVG:s}),w.current&&b.current&&(b.current.manuallyAnimateOnMount=!0));const S=b.current,x=e(Nt);!S||S.projection||!a||"html"!==S.type&&"svg"!==S.type||function(t,n,r,e){const{layoutId:o,layout:a,drag:s,dragConstraints:i,layoutScroll:u,layoutRoot:l,layoutAnchor:c,layoutCrossfade:f}=n;t.projection=new r(t.latestValues,n["data-framer-portal-id"]?void 0:_t(t.parent)),t.projection.setOptions({layoutId:o,layout:a,alwaysMeasureLayout:Boolean(s)||i&&Zt(i),visualElement:t,animationType:"string"==typeof a?a:"both",initialPromotionConfig:e,crossfade:f,layoutScroll:u,layoutRoot:l,layoutAnchor:c})}(b.current,r,a,x);const R=i(!1);u(()=>{S&&R.current&&S.update(r,d)});const k=r[K],B=i(Boolean(k)&&"undefined"!=typeof window&&!window.MotionHandoffIsComplete?.(k)&&window.MotionHasOptimisedAnimation?.(k));return zt(()=>{w.current=!0,S&&(R.current=!0,window.MotionIsMounted=!0,S.updateFeatures(),S.scheduleRenderMicrotask(),B.current&&S.animationState&&S.animationState.animateChanges())}),f(()=>{S&&(!B.current&&S.animationState&&S.animationState.animateChanges(),B.current&&(queueMicrotask(()=>{window.MotionHandoffMarkAsComplete?.(k)}),B.current=!1),S.enteringChildren=void 0)}),S}function _t(t){if(t)return!1!==t.options.allowProjection?t.projection:_t(t.parent)}function qt(r,{forwardMotionProps:o=!1,type:a}={},s,i){const u=a?"svg"===a:Et(r),l=u?Vt:jt;function c(a,s){let c;const f={...e(h),...a,layoutId:Gt(a)},{isStatic:d,isValidProp:p}=f,m=bt(a),v=l(a,d);if(!d&&"undefined"!=typeof window){e(g).strict;const t=function(t){const n=Yt(),{drag:r,layout:e}=n;if(!r&&!e)return{};const o={...r,...e};return{MeasureLayout:r?.isEnabled(t)||e?.isEnabled(t)?o.MeasureLayout:void 0,ProjectionNode:o.ProjectionNode}}(f);c=t.MeasureLayout,m.visualElement=Ut(r,v,f,i,t.ProjectionNode,u)}return t(y.Provider,{value:m,children:[c&&m.visualElement?n(c,{visualElement:m.visualElement,...f}):null,Ot(r,a,Ht(v,m.visualElement,s),v,d,o,u,p)]})}c.displayName=`motion.${"string"==typeof r?r:`create(${r.displayName??r.name??""})`}`;const f=d(c);return f[Dt]=r,f}function Gt({layoutId:t}){const n=e(m).id;return n&&void 0!==t?n+"-"+t:t}function Jt(t,n){return qt(t,n)}const Kt=Jt("div");export{Kt as MotionDiv}; //# sourceMappingURL=size-rollup-m.js.map