framer-motion
Version:
A simple and powerful JavaScript animation library
3 lines (2 loc) • 12.5 kB
JavaScript
import{jsxs as t,jsx as n}from"react/jsx-runtime";import{createContext as e,useContext as o,useMemo as r,Fragment as a,createElement as i,useRef as s,useInsertionEffect as l,useCallback as c,useLayoutEffect as u,useEffect as f,forwardRef as d}from"react";const p=(t=>n=>"string"==typeof n&&n.startsWith(t))("--"),m={test:t=>"number"==typeof t,parse:parseFloat,transform:t=>t},g={...m,transform:t=>((t,n,e)=>e>n?n:e<t?t:e)(0,1,t)},y={...m,default:1},h=t=>({test:n=>"string"==typeof n&&n.endsWith(t)&&1===n.split(" ").length,parse:parseFloat,transform:n=>`${n}${t}`}),v=h("deg"),w=h("%"),b=h("px"),S=(()=>({...w,parse:t=>w.parse(t)/100,transform:t=>w.transform(100*t)}))(),k={...m,transform:Math.round},x={rotate:v,pathRotation:v,rotateX:v,rotateY:v,rotateZ:v,scale:y,scaleX:y,scaleY:y,scaleZ:y,skew:v,skewX:v,skewY:v,distance:b,translateX:b,translateY:b,translateZ:b,x:b,y:b,z:b,perspective:b,transformPerspective:b,opacity:g,originX:S,originY:S,originZ:b},E={borderWidth:b,borderTopWidth:b,borderRightWidth:b,borderBottomWidth:b,borderLeftWidth:b,borderRadius:b,borderTopLeftRadius:b,borderTopRightRadius:b,borderBottomRightRadius:b,borderBottomLeftRadius:b,width:b,maxWidth:b,height:b,maxHeight:b,top:b,right:b,bottom:b,left:b,inset:b,insetBlock:b,insetBlockStart:b,insetBlockEnd:b,insetInline:b,insetInlineStart:b,insetInlineEnd:b,padding:b,paddingTop:b,paddingRight:b,paddingBottom:b,paddingLeft:b,paddingBlock:b,paddingBlockStart:b,paddingBlockEnd:b,paddingInline:b,paddingInlineStart:b,paddingInlineEnd:b,margin:b,marginTop:b,marginRight:b,marginBottom:b,marginLeft:b,marginBlock:b,marginBlockStart:b,marginBlockEnd:b,marginInline:b,marginInlineStart:b,marginInlineEnd:b,fontSize:b,backgroundPositionX:b,backgroundPositionY:b,...x,zIndex:k,fillOpacity:g,strokeOpacity:g,numOctaves:k},B=["transformPerspective","x","y","z","translateX","translateY","translateZ","scale","scaleX","scaleY","scaleZ","rotate","rotateX","rotateY","rotateZ","skew","skewX","skewY"],P=(()=>new Set([...B,"pathRotation"]))(),I=(t,n)=>n&&"number"==typeof t?n.transform(t):t,M={x:"translateX",y:"translateY",z:"translateZ",transformPerspective:"perspective"},A=B.length,O={},T=(t,n,e=I(n,x[t]))=>(O[t]||(O[t]=(M[t]||t)+"("))+e+")",C=(t,n)=>("number"==typeof n?n:parseFloat(n))===(t.startsWith("scale")?1:0);function W(t,n,e,o){const r=n=>"function"==typeof n?n(t.custom,{},{}):n;return"string"==typeof(n=r(n))&&(n=t.variants&&t.variants[n]),r(n)}const R=t=>Boolean(t&&t.getVelocity);function L(t,n,e){const{style:o,vars:r,transformOrigin:a}=t;let i=!1,s=!1;for(const t in n){const e=n[t];if(P.has(t))i=!0;else if(p(t))r[t]=e;else{const n=I(e,E[t]);t.startsWith("origin")?(s=!0,a[t]=n):o[t]=n}}if(n.transform||(i||e?o.transform=function(t,n,e){let o="";for(let r=0;r<A;r++){const a=B[r],i=t[a];if(void 0===i)continue;const s=e&&(n[a]=I(i,E[a]));C(a,i)||(o+=T(a,i,s||void 0)+" ")}const r=t.pathRotation;return r&&(o+=T("rotate",r)),o=o.trim(),e?e(n,o):o||"none"}(n,t.transform,e):o.transform&&(o.transform="none")),s){const{originX:t="50%",originY:n="50%",originZ:e=0}=a;o.transformOrigin=`${t} ${n} ${e}`}}const V={offset:"stroke-dashoffset",array:"stroke-dasharray"},j={offset:"strokeDashoffset",array:"strokeDasharray"};const X=["transform","opacity","clipPath","filter","offsetDistance","offsetPath","offsetRotate","offsetAnchor"];function Y(t,{attrX:n,attrY:e,attrScale:o,pathLength:r,pathSpacing:a=1,pathOffset:i=0,...s},l,c,u){if(L(t,s,c),l)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 X)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=u?.transformBox??"fill-box",delete f.transformBox),void 0!==n&&(f.x=n),void 0!==e&&(f.y=e),void 0!==o&&(f.scale=o),void 0!==r&&function(t,n,e=1,o=0,r=!0){t.pathLength=1;const a=r?V:j;t[a.offset]=""+-o,t[a.array]=`${n} ${e}`}(f,r,a,i,!1)}const D={};function H(t){return R(t)?t.get():t}function Z(t){return null!==t&&"object"==typeof t&&"function"==typeof t.start}function F(t){return"string"==typeof t||Array.isArray(t)}const $=["animate","whileInView","whileFocus","whileHover","whileTap","whileDrag","exit"],U=["initial"].concat($);function z(t){if(Z(t.animate))return!0;for(let n=0;n<U.length;n++)if(F(t[U[n]]))return!0;return!1}let N={};function _(t,{layout:n,layoutId:e}){return P.has(t)||t.startsWith("origin")||(n||void 0!==e)&&(!!D[t]||"opacity"===t)}function q(t,n,e){const o=t.style,r=n?.style,a={};if(!o)return a;for(const n in o)(R(o[n])||r&&R(r[n])||_(n,t)||void 0!==e?.getValue(n)?.liveStyle)&&(a[n]=o[n]);return a}const G=e({}),J=e({strict:!1}),K=e({transformPagePoint:t=>t,isStatic:!1,reducedMotion:"never"}),Q=e({});function tt(t){const{initial:n,animate:e}=function(t,n){if(z(t)){const{initial:n,animate:e}=t;return{initial:!1===n||F(n)?n:void 0,animate:F(e)?e:void 0}}return!1!==t.inherit?n:{}}(t,o(Q));return r(()=>({initial:n,animate:e}),[nt(n),nt(e)])}function nt(t){return Array.isArray(t)?t.join(" "):t}const et=()=>({style:{},transform:{},transformOrigin:{},vars:{}});function ot(t,n,e){for(const o in n)R(n[o])||_(o,e)||(t[o]=n[o])}function rt(t,n){const e={};return ot(e,t.style||{},t),Object.assign(e,function({transformTemplate:t},n){return r(()=>{const e={style:{},transform:{},transformOrigin:{},vars:{}};return L(e,n,t),Object.assign({},e.vars,e.style)},[n])}(t,n)),e}function at(t,n){const e={},o=rt(t,n);return t.drag&&!1!==t.dragListener&&(e.draggable=!1,o.userSelect=o.WebkitUserSelect=o.WebkitTouchCallout="none",o.touchAction=!0===t.drag?"none":"pan-"+("x"===t.drag?"y":"x")),void 0===t.tabIndex&&(t.onTap||t.onTapStart||t.whileTap)&&(e.tabIndex=0),e.style=o,e}const it=()=>({style:{},transform:{},transformOrigin:{},vars:{},attrs:{}});function st(t,n,e,o){const a=r(()=>{const e={style:{},transform:{},transformOrigin:{},vars:{},attrs:{}};var r;return Y(e,n,"string"==typeof(r=o)&&"svg"===r.toLowerCase(),t.transformTemplate,t.style),{...e.attrs,style:{...e.style}}},[n]);if(t.style){const n={};return ot(n,t.style,t),{...a,style:{...n,...a.style}}}return a}const lt=new Set(["animate","exit","variants","initial","style","values","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 ct(t){return t.startsWith("while")||t.startsWith("drag")&&"draggable"!==t||t.startsWith("layout")||t.startsWith("onTap")||t.startsWith("onPan")||t.startsWith("onLayout")||lt.has(t)}function ut(t,n){return t.startsWith("on")?!ct(t):n?.(t)??!ct(t)}const ft=["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("-")&&!!(ft.indexOf(t)>-1||/[A-Z]/u.test(t))}function pt(t,n,e,{latestValues:o},s,l=!1,c,u){const f=(c??dt(t)?st:at)(n,o,s,t),d=function(t,n,e,o){const r={};for(const a in t)"values"===a&&"object"==typeof t.values||R(t[a])||(ut(a,o)||!0===e&&ct(a)||!n&&!ct(a)||t.draggable&&a.startsWith("onDrag"))&&(r[a]=t[a]);return r}(n,"string"==typeof t,l,u),p=t!==a?{...d,...f,ref:e}:{},{children:m}=n,g=r(()=>R(m)?m.get():m,[m]);return i(t,{...p,children:g})}const mt=e(null);function gt(t){const n=s(null);return null===n.current&&(n.current=t()),n.current}function yt(t,n,e,o){const r={},a=o(t,{});for(const t in a)r[t]=H(a[t]);let{initial:i,animate:s}=t;const l=z(t),c=function(t){return Boolean(z(t)||t.variants)}(t);n&&c&&!l&&!1!==t.inherit&&(void 0===i&&(i=n.initial),void 0===s&&(s=n.animate));let u=!!e&&!1===e.initial;u=u||!1===i;const f=u?s:i;if(f&&"boolean"!=typeof f&&!Z(f)){const n=Array.isArray(f)?f:[f];for(let e=0;e<n.length;e++){const o=W(t,n[e]);if(o){const{transitionEnd:t,transition:n,...e}=o;for(const t in e){let n=e[t];if(Array.isArray(n)){n=n[u?n.length-1:0]}null!==n&&(r[t]=n)}for(const n in t)r[n]=t[n]}}}return r}const ht=t=>(n,e)=>{const r=o(Q),a=o(mt),i=()=>function({scrapeMotionValuesFromProps:t,createRenderState:n},e,o,r){return{latestValues:yt(e,o,r,t),renderState:n()}}(t,n,r,a);return e?i():gt(i)},vt=ht({scrapeMotionValuesFromProps:q,createRenderState:et}),wt=ht({scrapeMotionValuesFromProps:function(t,n,e){const o=q(t,n,e);for(const e in t)if("children"!==e&&(R(t[e])||R(n[e]))){o[-1!==B.indexOf(e)?"attr"+e.charAt(0).toUpperCase()+e.substring(1):e]=t[e]}return o},createRenderState:it}),bt={animation:["variants",...$],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 St=!1;function kt(){if(St)return;const t={};for(const n in bt)t[n]={isEnabled:t=>bt[n].some(n=>!!t[n])};N=t,St=!0}function xt(){return kt(),N}const Et=Symbol.for("motionComponentSymbol");function Bt(t,n,e){const o=s(e);l(()=>{o.current=e});const r=s(null);return c(e=>{e&&t.onMount?.(e),n&&(e?n.mount(e):n.unmount());const a=o.current;if("function"==typeof a)if(e){const t=a(e);"function"==typeof t&&(r.current=t)}else r.current?(r.current(),r.current=null):a(e);else a&&(a.current=e)},[n])}const Pt=e({});function It(t){return t&&"object"==typeof t&&Object.prototype.hasOwnProperty.call(t,"current")}const Mt="undefined"!=typeof window?u:f;function At(t,n,e,r,a,i){const{visualElement:c}=o(Q),u=o(J),d=o(mt),p=o(K),m=p.reducedMotion,g=p.skipAnimations,y=s(null),h=s(!1);r=r||u.renderer,!y.current&&r&&(y.current=r(t,{visualState:n,parent:c,props:e,presenceContext:d,blockInitialAnimation:!!d&&!1===d.initial,reducedMotionConfig:m,skipAnimations:g,isSVG:i}),h.current&&y.current&&(y.current.manuallyAnimateOnMount=!0));const v=y.current,w=o(Pt);!v||v.projection||!a||"html"!==v.type&&"svg"!==v.type||function(t,n,e,o){const{layoutId:r,layout:a,drag:i,dragConstraints:s,layoutScroll:l,layoutRoot:c,layoutAnchor:u,layoutCrossfade:f}=n,d=t.projection=new e(t.latestValues,n["data-framer-portal-id"]?void 0:Ot(t.parent));d.setOptions({layoutId:r,layout:a,alwaysMeasureLayout:Boolean(i)||s&&It(s),visualElement:t,animationType:"string"==typeof a?a:"both",initialPromotionConfig:o,crossfade:f,layoutScroll:l,layoutRoot:c,layoutAnchor:u});const p=d.getStack()?.lead;p&&!d.root.isUpdateBlocked()&&(p.willUpdate(),p.scheduleCheckAfterUnmount())}(y.current,e,a,w),l(()=>{v&&v.props!==e&&v.update(e,d)});const b=e["data-framer-appear-id"],S=s(Boolean(b)&&"undefined"!=typeof window&&!window.MotionHandoffIsComplete?.(b)&&window.MotionHasOptimisedAnimation?.(b));return Mt(()=>{h.current&&v&&(v.animationState?.animateChanges(),v.enteringChildren=void 0)},[]),Mt(()=>{h.current=!0,v&&(window.MotionIsMounted=!0,v.updateFeatures(),v.scheduleRenderMicrotask(),S.current&&v.animationState&&v.animationState.animateChanges())}),f(()=>{v&&(!S.current&&v.animationState&&v.animationState.animateChanges(),S.current&&(queueMicrotask(()=>{window.MotionHandoffMarkAsComplete?.(b)}),S.current=!1),v.enteringChildren=void 0)}),v}function Ot(t){if(t)return!1!==t.options.allowProjection?t.projection:Ot(t.parent)}function Tt(e,{forwardMotionProps:r=!1,type:a}={},i,s){const l=a?"svg"===a:dt(e),c=l?wt:vt;function u(a,i){let u;const f=function({layoutId:t}){const n=o(G).id;return n&&void 0!==t?n+"-"+t:t}(a);gt(()=>!1)&&(a={...a,initial:!1});const d={...o(K),...a,layoutId:f},{isStatic:p,isValidProp:m}=d,g=tt(a),y=c(a,p);if(!p&&"undefined"!=typeof window){o(J).strict;const t=function(t){const n=xt(),{drag:e,layout:o}=n;if(!e&&!o)return{};const r={...e,...o};return{MeasureLayout:r.MeasureLayout,isEnabled:e?.isEnabled(t)||o?.isEnabled(t),ProjectionNode:r.ProjectionNode}}(d);g.visualElement=At(e,y,d,s,t.ProjectionNode,l),(t.isEnabled||g.visualElement?.projection?.options.layoutId)&&(u=t.MeasureLayout)}return t(Q.Provider,{value:g,children:[u&&g.visualElement?n(u,{visualElement:g.visualElement,...d}):null,pt(e,a,Bt(y,g.visualElement,i),y,p,r,l,m)]})}u.displayName=`motion.${"string"==typeof e?e:`create(${e.displayName??e.name??""})`}`;const f=d(u);return f[Et]=e,f}function Ct(t,n){return Tt(t,n)}const Wt=Ct("div");export{Wt as MotionDiv};
//# sourceMappingURL=size-rollup-m.js.map