UNPKG

framer-motion

Version:

A simple and powerful JavaScript animation library

2 lines (1 loc) • 14.6 kB
import{jsxs as t,jsx as e}from"react/jsx-runtime";import{createContext as n,useContext as r,useMemo as o,useCallback as a,useLayoutEffect as i,useEffect as s,useRef as c,useInsertionEffect as l,forwardRef as u,Fragment as f,createElement as d}from"react";const p=n({}),m=n({strict:!1}),g=n({transformPagePoint:t=>t,isStatic:!1,reducedMotion:"never"}),y=n({});function h(t){return null!==t&&"object"==typeof t&&"function"==typeof t.start}function v(t){return"string"==typeof t||Array.isArray(t)}const w=["initial","animate","whileInView","whileFocus","whileHover","whileTap","whileDrag","exit"];function b(t){return h(t.animate)||w.some((e=>v(t[e])))}function S(t){const{initial:e,animate:n}=function(t,e){if(b(t)){const{initial:e,animate:n}=t;return{initial:!1===e||v(e)?e:void 0,animate:v(n)?n:void 0}}return!1!==t.inherit?e:{}}(t,r(y));return o((()=>({initial:e,animate:n})),[x(e),x(n)])}function x(t){return Array.isArray(t)?t.join(" "):t}const P="undefined"!=typeof window,k={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"]},M={};for(const t in k)M[t]={isEnabled:e=>k[t].some((t=>!!e[t]))};const T=Symbol.for("motionComponentSymbol");function V(t){return t&&"object"==typeof t&&Object.prototype.hasOwnProperty.call(t,"current")}function C(t,e,n){return a((r=>{r&&t.onMount&&t.onMount(r),e&&(r?e.mount(r):e.unmount()),n&&("function"==typeof n?n(r):V(n)&&(n.current=r))}),[e])}const E={value:null,addProjectionMetrics:null},A=["read","resolveKeyframes","update","preRender","render","postRender"];function W(t,e){let n=!1,r=!0;const o={delta:0,timestamp:0,isProcessing:!1},a=()=>n=!0,i=A.reduce(((t,n)=>(t[n]=function(t,e){let n=new Set,r=new Set,o=!1,a=!1;const i=new WeakSet;let s={delta:0,timestamp:0,isProcessing:!1},c=0;function l(e){i.has(e)&&(u.schedule(e),t()),c++,e(s)}const u={schedule:(t,e=!1,a=!1)=>{const s=a&&o?n:r;return e&&i.add(t),s.has(t)||s.add(t),t},cancel:t=>{r.delete(t),i.delete(t)},process:t=>{s=t,o?a=!0:(o=!0,[n,r]=[r,n],n.forEach(l),e&&E.value&&E.value.frameloop[e].push(c),c=0,n.clear(),o=!1,a&&(a=!1,u.process(t)))}};return u}(a,e?n:void 0),t)),{}),{read:s,resolveKeyframes:c,update:l,preRender:u,render:f,postRender:d}=i,p=()=>{const a=performance.now();n=!1,o.delta=r?1e3/60:Math.max(Math.min(a-o.timestamp,40),1),o.timestamp=a,o.isProcessing=!0,s.process(o),c.process(o),l.process(o),u.process(o),f.process(o),d.process(o),o.isProcessing=!1,n&&e&&(r=!1,t(p))};return{schedule:A.reduce(((e,a)=>{const s=i[a];return e[a]=(e,a=!1,i=!1)=>(n||(n=!0,r=!0,o.isProcessing||t(p)),s.schedule(e,a,i)),e}),{}),cancel:t=>{for(let e=0;e<A.length;e++)i[A[e]].cancel(t)},state:o,steps:i}}const{schedule:L,cancel:O}=W(queueMicrotask,!1),{schedule:R,cancel:j,state:B,steps:I}=W("undefined"!=typeof requestAnimationFrame?requestAnimationFrame:t=>t,!0),X=t=>t.replace(/([a-z])([A-Z])/gu,"$1-$2").toLowerCase(),Y="data-"+X("framerAppearId"),F=n(null),$=n({}),D=P?i:s;function H(t,e,n,o,a){const{visualElement:i}=r(y),u=r(m),f=r(F),d=r(g).reducedMotion,p=c(null);o=o||u.renderer,!p.current&&o&&(p.current=o(t,{visualState:e,parent:i,props:n,presenceContext:f,blockInitialAnimation:!!f&&!1===f.initial,reducedMotionConfig:d}));const h=p.current,v=r($);!h||h.projection||!a||"html"!==h.type&&"svg"!==h.type||function(t,e,n,r){const{layoutId:o,layout:a,drag:i,dragConstraints:s,layoutScroll:c,layoutRoot:l,layoutCrossfade:u}=e;t.projection=new n(t.latestValues,e["data-framer-portal-id"]?void 0:Z(t.parent)),t.projection.setOptions({layoutId:o,layout:a,alwaysMeasureLayout:Boolean(i)||s&&V(s),visualElement:t,animationType:"string"==typeof a?a:"both",initialPromotionConfig:r,crossfade:u,layoutScroll:c,layoutRoot:l})}(p.current,n,a,v);const w=c(!1);l((()=>{h&&w.current&&h.update(n,f)}));const b=n[Y],S=c(Boolean(b)&&!window.MotionHandoffIsComplete?.(b)&&window.MotionHasOptimisedAnimation?.(b));return D((()=>{h&&(w.current=!0,window.MotionIsMounted=!0,h.updateFeatures(),L.render(h.render),S.current&&h.animationState&&h.animationState.animateChanges())})),s((()=>{h&&(!S.current&&h.animationState&&h.animationState.animateChanges(),S.current&&(queueMicrotask((()=>{window.MotionHandoffMarkAsComplete?.(b)})),S.current=!1))})),h}function Z(t){if(t)return!1!==t.options.allowProjection?t.projection:Z(t.parent)}function U({preloadedFeatures:n,createVisualElement:o,useRender:a,useVisualState:i,Component:s}){function c(n,c){let l;const u={...r(g),...n,layoutId:q(n)},{isStatic:f}=u,d=S(n),p=i(n,f);if(!f&&P){r(m).strict;const t=function(t){const{drag:e,layout:n}=M;if(!e&&!n)return{};const r={...e,...n};return{MeasureLayout:e?.isEnabled(t)||n?.isEnabled(t)?r.MeasureLayout:void 0,ProjectionNode:r.ProjectionNode}}(u);l=t.MeasureLayout,d.visualElement=H(s,p,u,o,t.ProjectionNode)}return t(y.Provider,{value:d,children:[l&&d.visualElement?e(l,{visualElement:d.visualElement,...u}):null,a(s,n,C(p,d.visualElement,c),p,f,d.visualElement)]})}n&&function(t){for(const e in t)M[e]={...M[e],...t[e]}}(n),c.displayName=`motion.${"string"==typeof s?s:`create(${s.displayName??s.name??""})`}`;const l=u(c);return l[T]=s,l}function q({layoutId:t}){const e=r(p).id;return e&&void 0!==t?e+"-"+t:t}const z=(t=>e=>"string"==typeof e&&e.startsWith(t))("--"),N={},K=["transformPerspective","x","y","z","translateX","translateY","translateZ","scale","scaleX","scaleY","rotate","rotateX","rotateY","rotateZ","skew","skewX","skewY"],_=new Set(K);function G(t,{layout:e,layoutId:n}){return _.has(t)||t.startsWith("origin")||(e||void 0!==n)&&(!!N[t]||"opacity"===t)}const J=t=>Boolean(t&&t.getVelocity),Q=(t,e)=>e&&"number"==typeof t?e.transform(t):t,tt={test:t=>"number"==typeof t,parse:parseFloat,transform:t=>t},et={...tt,transform:t=>((t,e,n)=>n>e?e:n<t?t:n)(0,1,t)},nt={...tt,default:1},rt=t=>({test:e=>"string"==typeof e&&e.endsWith(t)&&1===e.split(" ").length,parse:parseFloat,transform:e=>`${e}${t}`}),ot=rt("deg"),at=rt("%"),it=rt("px"),st={...at,parse:t=>at.parse(t)/100,transform:t=>at.transform(100*t)},ct={borderWidth:it,borderTopWidth:it,borderRightWidth:it,borderBottomWidth:it,borderLeftWidth:it,borderRadius:it,radius:it,borderTopLeftRadius:it,borderTopRightRadius:it,borderBottomRightRadius:it,borderBottomLeftRadius:it,width:it,maxWidth:it,height:it,maxHeight:it,top:it,right:it,bottom:it,left:it,padding:it,paddingTop:it,paddingRight:it,paddingBottom:it,paddingLeft:it,margin:it,marginTop:it,marginRight:it,marginBottom:it,marginLeft:it,backgroundPositionX:it,backgroundPositionY:it},lt={rotate:ot,rotateX:ot,rotateY:ot,rotateZ:ot,scale:nt,scaleX:nt,scaleY:nt,scaleZ:nt,skew:ot,skewX:ot,skewY:ot,distance:it,translateX:it,translateY:it,translateZ:it,x:it,y:it,z:it,perspective:it,transformPerspective:it,opacity:et,originX:st,originY:st,originZ:it},ut={...tt,transform:Math.round},ft={...ct,...lt,zIndex:ut,size:it,fillOpacity:et,strokeOpacity:et,numOctaves:ut},dt={x:"translateX",y:"translateY",z:"translateZ",transformPerspective:"perspective"},pt=K.length;function mt(t,e,n){const{style:r,vars:o,transformOrigin:a}=t;let i=!1,s=!1;for(const t in e){const n=e[t];if(_.has(t))i=!0;else if(z(t))o[t]=n;else{const e=Q(n,ft[t]);t.startsWith("origin")?(s=!0,a[t]=e):r[t]=e}}if(e.transform||(i||n?r.transform=function(t,e,n){let r="",o=!0;for(let a=0;a<pt;a++){const i=K[a],s=t[i];if(void 0===s)continue;let c=!0;if(c="number"==typeof s?s===(i.startsWith("scale")?1:0):0===parseFloat(s),!c||n){const t=Q(s,ft[i]);c||(o=!1,r+=`${dt[i]||i}(${t}) `),n&&(e[i]=t)}}return r=r.trim(),n?r=n(e,o?"":r):o&&(r="none"),r}(e,t.transform,n):r.transform&&(r.transform="none")),s){const{originX:t="50%",originY:e="50%",originZ:n=0}=a;r.transformOrigin=`${t} ${e} ${n}`}}const gt=()=>({style:{},transform:{},transformOrigin:{},vars:{}});function yt(t,e,n){for(const r in e)J(e[r])||G(r,n)||(t[r]=e[r])}function ht(t,e){const n={};return yt(n,t.style||{},t),Object.assign(n,function({transformTemplate:t},e){return o((()=>{const n={style:{},transform:{},transformOrigin:{},vars:{}};return mt(n,e,t),Object.assign({},n.vars,n.style)}),[e])}(t,e)),n}function vt(t,e){const n={},r=ht(t,e);return t.drag&&!1!==t.dragListener&&(n.draggable=!1,r.userSelect=r.WebkitUserSelect=r.WebkitTouchCallout="none",r.touchAction=!0===t.drag?"none":"pan-"+("x"===t.drag?"y":"x")),void 0===t.tabIndex&&(t.onTap||t.onTapStart||t.whileTap)&&(n.tabIndex=0),n.style=r,n}const wt=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","ignoreStrict","viewport"]);function bt(t){return t.startsWith("while")||t.startsWith("drag")&&"draggable"!==t||t.startsWith("layout")||t.startsWith("onTap")||t.startsWith("onPan")||t.startsWith("onLayout")||wt.has(t)}let St=t=>!bt(t);try{(xt=require("@emotion/is-prop-valid").default)&&(St=t=>t.startsWith("on")?!bt(t):xt(t))}catch{}var xt;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 kt(t){return"string"==typeof t&&!t.includes("-")&&!!(Pt.indexOf(t)>-1||/[A-Z]/u.test(t))}const Mt={offset:"stroke-dashoffset",array:"stroke-dasharray"},Tt={offset:"strokeDashoffset",array:"strokeDasharray"};function Vt(t,e,n){return"string"==typeof t?t:it.transform(e+n*t)}function Ct(t,{attrX:e,attrY:n,attrScale:r,originX:o,originY:a,pathLength:i,pathSpacing:s=1,pathOffset:c=0,...l},u,f){if(mt(t,l,f),u)return void(t.style.viewBox&&(t.attrs.viewBox=t.style.viewBox));t.attrs=t.style,t.style={};const{attrs:d,style:p,dimensions:m}=t;d.transform&&(m&&(p.transform=d.transform),delete d.transform),m&&(void 0!==o||void 0!==a||p.transform)&&(p.transformOrigin=function(t,e,n){return`${Vt(e,t.x,t.width)} ${Vt(n,t.y,t.height)}`}(m,void 0!==o?o:.5,void 0!==a?a:.5)),void 0!==e&&(d.x=e),void 0!==n&&(d.y=n),void 0!==r&&(d.scale=r),void 0!==i&&function(t,e,n=1,r=0,o=!0){t.pathLength=1;const a=o?Mt:Tt;t[a.offset]=it.transform(-r);const i=it.transform(e),s=it.transform(n);t[a.array]=`${i} ${s}`}(d,i,s,c,!1)}const Et=()=>({style:{},transform:{},transformOrigin:{},vars:{},attrs:{}}),At=t=>"string"==typeof t&&"svg"===t.toLowerCase();function Wt(t,e,n,r){const a=o((()=>{const n={style:{},transform:{},transformOrigin:{},vars:{},attrs:{}};return Ct(n,e,At(r),t.transformTemplate),{...n.attrs,style:{...n.style}}}),[e]);if(t.style){const e={};yt(e,t.style,t),a.style={...e,...a.style}}return a}function Lt(t=!1){return(e,n,r,{latestValues:a},i)=>{const s=(kt(e)?Wt:vt)(n,a,i,e),c=function(t,e,n){const r={};for(const o in t)"values"===o&&"object"==typeof t.values||(St(o)||!0===n&&bt(o)||!e&&!bt(o)||t.draggable&&o.startsWith("onDrag"))&&(r[o]=t[o]);return r}(n,"string"==typeof e,t),l=e!==f?{...c,...s,ref:r}:{},{children:u}=n,p=o((()=>J(u)?u.get():u),[u]);return d(e,{...l,children:p})}}function Ot(t){const e=[{},{}];return t?.values.forEach(((t,n)=>{e[0][n]=t.get(),e[1][n]=t.getVelocity()})),e}function Rt(t,e,n,r){if("function"==typeof e){const[o,a]=Ot(r);e=e(void 0!==n?n:t.custom,o,a)}if("string"==typeof e&&(e=t.variants&&t.variants[e]),"function"==typeof e){const[o,a]=Ot(r);e=e(void 0!==n?n:t.custom,o,a)}return e}function jt(t){const e=J(t)?t.get():t;return n=e,Boolean(n&&"object"==typeof n&&n.mix&&n.toValue)?e.toValue():e;var n}const Bt=t=>(e,n)=>{const o=r(y),a=r(F),i=()=>function({scrapeMotionValuesFromProps:t,createRenderState:e,onUpdate:n},r,o,a){const i={latestValues:It(r,o,a,t),renderState:e()};return n&&(i.onMount=t=>n({props:r,current:t,...i}),i.onUpdate=t=>n(t)),i}(t,e,o,a);return n?i():function(t){const e=c(null);return null===e.current&&(e.current=t()),e.current}(i)};function It(t,e,n,r){const o={},a=r(t,{});for(const t in a)o[t]=jt(a[t]);let{initial:i,animate:s}=t;const c=b(t),l=function(t){return Boolean(b(t)||t.variants)}(t);e&&l&&!c&&!1!==t.inherit&&(void 0===i&&(i=e.initial),void 0===s&&(s=e.animate));let u=!!n&&!1===n.initial;u=u||!1===i;const f=u?s:i;if(f&&"boolean"!=typeof f&&!h(f)){const e=Array.isArray(f)?f:[f];for(let n=0;n<e.length;n++){const r=Rt(t,e[n]);if(r){const{transitionEnd:t,transition:e,...n}=r;for(const t in n){let e=n[t];if(Array.isArray(e)){e=e[u?e.length-1:0]}null!==e&&(o[t]=e)}for(const e in t)o[e]=t[e]}}}return o}function Xt(t,e,n){const{style:r}=t,o={};for(const a in r)(J(r[a])||e.style&&J(e.style[a])||G(a,t)||void 0!==n?.getValue(a)?.liveStyle)&&(o[a]=r[a]);return o}const Yt={useVisualState:Bt({scrapeMotionValuesFromProps:Xt,createRenderState:gt})};const Ft=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 $t(t,e,n,r){!function(t,{style:e,vars:n},r,o){Object.assign(t.style,e,o&&o.getProjectionStyles(r));for(const e in n)t.style.setProperty(e,n[e])}(t,e,void 0,r);for(const n in e.attrs)t.setAttribute(Ft.has(n)?n:X(n),e.attrs[n])}const Dt=["x","y","width","height","cx","cy","r"],Ht={useVisualState:Bt({scrapeMotionValuesFromProps:function(t,e,n){const r=Xt(t,e,n);for(const n in t)if(J(t[n])||J(e[n])){r[-1!==K.indexOf(n)?"attr"+n.charAt(0).toUpperCase()+n.substring(1):n]=t[n]}return r},createRenderState:Et,onUpdate:({props:t,prevProps:e,current:n,renderState:r,latestValues:o})=>{if(!n)return;let a=!!t.drag;if(!a)for(const t in o)if(_.has(t)){a=!0;break}if(!a)return;let i=!e;if(e)for(let n=0;n<Dt.length;n++){const r=Dt[n];t[r]!==e[r]&&(i=!0)}i&&R.read((()=>{!function(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}}}(n,r),R.render((()=>{Ct(r,o,At(n.tagName),t.transformTemplate),$t(n,r)}))}))}})};function Zt(t,e){return function(n,{forwardMotionProps:r}={forwardMotionProps:!1}){return U({...kt(n)?Ht:Yt,preloadedFeatures:t,useRender:Lt(r),createVisualElement:e,Component:n})}}const Ut=Zt()("div");export{Ut as MotionDiv};