framer-motion
Version:
A simple and powerful React animation library
2 lines (1 loc) • 16.7 kB
JavaScript
import*as t from"react";import r,{createContext as n,useContext as e,useLayoutEffect as o,useEffect as a,useState as i,useRef as s,useCallback as u,useMemo as l,forwardRef as c,createElement as f}from"react";var d=function(t,r){return(d=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,r){t.__proto__=r}||function(t,r){for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])})(t,r)};var p=function(){return(p=Object.assign||function(t){for(var r,n=1,e=arguments.length;n<e;n++)for(var o in r=arguments[n])Object.prototype.hasOwnProperty.call(r,o)&&(t[o]=r[o]);return t}).apply(this,arguments)};function v(t,r){var n={};for(var e in t)Object.prototype.hasOwnProperty.call(t,e)&&r.indexOf(e)<0&&(n[e]=t[e]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(e=Object.getOwnPropertySymbols(t);o<e.length;o++)r.indexOf(e[o])<0&&Object.prototype.propertyIsEnumerable.call(t,e[o])&&(n[e[o]]=t[e[o]])}return n}var m=function(t){return{isEnabled:function(r){return t.some((function(t){return!!r[t]}))}}},y={measureLayout:m(["layout","layoutId","drag"]),animation:m(["animate","exit","variants","whileHover","whileTap","whileFocus","whileDrag","whileInView"]),exit:m(["exit"]),drag:m(["drag","dragControls"]),focus:m(["whileFocus"]),hover:m(["whileHover","onHoverStart","onHoverEnd"]),tap:m(["whileTap","onTap","onTapStart","onTapCancel"]),pan:m(["onPan","onPanStart","onPanSessionStart","onPanEnd"]),inView:m(["whileInView","onViewportEnter","onViewportLeave"])};var g=n({strict:!1}),h=Object.keys(y),w=h.length;var b=n({transformPagePoint:function(t){return t},isStatic:!1,reducedMotion:"never"}),S=n({});var O=n(null),x="undefined"!=typeof document,E=x?o:a,j={current:null},P=!1;function C(){return!P&&function(){if(P=!0,x)if(window.matchMedia){var t=window.matchMedia("(prefers-reduced-motion)"),r=function(){return j.current=t.matches};t.addListener(r),r()}else j.current=!1}(),function(t,r){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var e,o,a=n.call(t),i=[];try{for(;(void 0===r||r-- >0)&&!(e=a.next()).done;)i.push(e.value)}catch(t){o={error:t}}finally{try{e&&!e.done&&(n=a.return)&&n.call(a)}finally{if(o)throw o.error}}return i}(i(j.current),1)[0]}function T(t,r,n,o){var i,u,l=e(g),c=e(S).visualElement,f=e(O),d=(i=C(),"never"!==(u=e(b).reducedMotion)&&("always"===u||i)),p=s(void 0);o||(o=l.renderer),!p.current&&o&&(p.current=o(t,{visualState:r,parent:c,props:n,presenceId:null==f?void 0:f.id,blockInitialAnimation:!1===(null==f?void 0:f.initial),shouldReduceMotion:d}));var v=p.current;return E((function(){null==v||v.syncRender()})),a((function(){var t;null===(t=null==v?void 0:v.animationState)||void 0===t||t.animateChanges()})),E((function(){return function(){return null==v?void 0:v.notifyUnmount()}}),[]),v}function V(t){return"object"==typeof t&&Object.prototype.hasOwnProperty.call(t,"current")}function k(t){return"string"==typeof t||function(t){return Array.isArray(t)}(t)}function L(t){var r;return"function"==typeof(null===(r=t.animate)||void 0===r?void 0:r.start)||k(t.initial)||k(t.animate)||k(t.whileHover)||k(t.whileDrag)||k(t.whileTap)||k(t.whileFocus)||k(t.exit)}function A(t){var r=function(t,r){if(L(t)){var n=t.initial,e=t.animate;return{initial:!1===n||k(n)?n:void 0,animate:k(e)?e:void 0}}return!1!==t.inherit?r:{}}(t,e(S)),n=r.initial,o=r.animate;return l((function(){return{initial:n,animate:o}}),[M(n),M(o)])}function M(t){return Array.isArray(t)?t.join(" "):t}function R(t){var r=s(null);return null===r.current&&(r.current=t()),r.current}const B="undefined"!=typeof performance?()=>performance.now():()=>Date.now(),D="undefined"!=typeof window?t=>window.requestAnimationFrame(t):t=>setTimeout(()=>t(B()),1/60*1e3);let X=!0,Y=!1,H=!1;const I={delta:0,timestamp:0},W=["read","update","preRender","render","postRender"],F=W.reduce((t,r)=>(t[r]=function(t){let r=[],n=[],e=0,o=!1,a=!1;const i=new WeakSet,s={schedule:(t,a=!1,s=!1)=>{const u=s&&o,l=u?r:n;return a&&i.add(t),-1===l.indexOf(t)&&(l.push(t),u&&o&&(e=r.length)),t},cancel:t=>{const r=n.indexOf(t);-1!==r&&n.splice(r,1),i.delete(t)},process:u=>{if(o)a=!0;else{if(o=!0,[r,n]=[n,r],n.length=0,e=r.length,e)for(let n=0;n<e;n++){const e=r[n];e(u),i.has(e)&&(s.schedule(e),t())}o=!1,a&&(a=!1,s.process(u))}}};return s}(()=>Y=!0),t),{});W.reduce((t,r)=>{const n=F[r];return t[r]=(t,r=!1,e=!1)=>(Y||z(),n.schedule(t,r,e)),t},{}),W.reduce((t,r)=>(t[r]=F[r].cancel,t),{}),W.reduce((t,r)=>(t[r]=()=>F[r].process(I),t),{});const Z=t=>F[t].process(I),_=t=>{Y=!1,I.delta=X?1/60*1e3:Math.max(Math.min(t-I.timestamp,40),1),I.timestamp=t,H=!0,W.forEach(Z),H=!1,Y&&(X=!1,D(_))},z=()=>{Y=!0,X=!0,H||D(_)};const U={test:t=>"number"==typeof t,parse:parseFloat,transform:t=>t},N=Object.assign(Object.assign({},U),{transform:(K=0,$=1,t=>Math.max(Math.min(t,$),K))});var K,$;const q=Object.assign(Object.assign({},U),{default:1}),G=t=>({test:r=>function(t){return"string"==typeof t}(r)&&r.endsWith(t)&&1===r.split(" ").length,parse:parseFloat,transform:r=>`${r}${t}`}),J=G("deg"),Q=G("%"),tt=G("px"),rt=Object.assign(Object.assign({},Q),{parse:t=>Q.parse(t)/100,transform:t=>Q.transform(100*t)});var nt=function(t){return Boolean(null!==t&&"object"==typeof t&&t.getVelocity)},et=p(p({},U),{transform:Math.round}),ot={borderWidth:tt,borderTopWidth:tt,borderRightWidth:tt,borderBottomWidth:tt,borderLeftWidth:tt,borderRadius:tt,radius:tt,borderTopLeftRadius:tt,borderTopRightRadius:tt,borderBottomRightRadius:tt,borderBottomLeftRadius:tt,width:tt,maxWidth:tt,height:tt,maxHeight:tt,size:tt,top:tt,right:tt,bottom:tt,left:tt,padding:tt,paddingTop:tt,paddingRight:tt,paddingBottom:tt,paddingLeft:tt,margin:tt,marginTop:tt,marginRight:tt,marginBottom:tt,marginLeft:tt,rotate:J,rotateX:J,rotateY:J,rotateZ:J,scale:q,scaleX:q,scaleY:q,scaleZ:q,skew:J,skewX:J,skewY:J,distance:tt,translateX:tt,translateY:tt,translateZ:tt,x:tt,y:tt,z:tt,perspective:tt,transformPerspective:tt,opacity:N,originX:rt,originY:rt,originZ:tt,zIndex:et,fillOpacity:N,strokeOpacity:N,numOctaves:et},at={},it=["","X","Y","Z"],st=["transformPerspective","x","y","z"];function ut(t,r){return st.indexOf(t)-st.indexOf(r)}["translate","scale","rotate","skew"].forEach((function(t){return it.forEach((function(r){return st.push(t+r)}))}));var lt=new Set(st);function ct(t){return lt.has(t)}var ft=new Set(["originX","originY","originZ"]);function dt(t){return ft.has(t)}function pt(t){var r,n=nt(t)?t.get():t;return r=n,Boolean(r&&"object"==typeof r&&r.mix&&r.toValue)?n.toValue():n}var vt=!1,mt=1;var yt=n({}),gt=n({});var ht=function(t){function r(){return null!==t&&t.apply(this,arguments)||this}return function(t,r){if("function"!=typeof r&&null!==r)throw new TypeError("Class extends value "+String(r)+" is not a constructor or null");function n(){this.constructor=t}d(t,r),t.prototype=null===r?Object.create(r):(n.prototype=r.prototype,new n)}(r,t),r.prototype.getSnapshotBeforeUpdate=function(){return this.updateProps(),null},r.prototype.componentDidUpdate=function(){},r.prototype.updateProps=function(){var t=this.props,r=t.visualElement,n=t.props;r&&r.setProps(n)},r.prototype.render=function(){return this.props.children},r}(r.Component);function wt(r){var n=r.preloadedFeatures,o=r.createVisualElement,a=r.projectionNodeConstructor,i=r.useRender,s=r.useVisualState,l=r.Component;return n&&function(t){for(var r in t)null!==t[r]&&("projectionNodeConstructor"===r?y.projectionNodeConstructor=t[r]:y[r].Component=t[r])}(n),c((function(r,n){var c=function(t){var r,n=t.layoutId,o=null===(r=e(yt))||void 0===r?void 0:r.id;return o&&void 0!==n?o+"-"+n:n}(r);r=p(p({},r),{layoutId:c});var f=e(b),d=null,v=A(r),m=f.isStatic?void 0:R((function(){if(vt)return mt++})),O=s(r,f.isStatic);return!f.isStatic&&x&&(v.visualElement=T(l,O,p(p({},f),r),o),function(t,r,n,o){var a,i=r.layoutId,s=r.layout,u=r.drag,l=r.dragConstraints,c=r.layoutScroll,f=e(gt);o&&n&&!(null==n?void 0:n.projection)&&(n.projection=new o(t,n.getLatestValues(),null===(a=n.parent)||void 0===a?void 0:a.projection),n.projection.setOptions({layoutId:i,layout:s,alwaysMeasureLayout:Boolean(u)||l&&V(l),visualElement:n,scheduleRender:function(){return n.scheduleRender()},animationType:"string"==typeof s?s:"both",initialPromotionConfig:f,layoutScroll:c}))}(m,r,v.visualElement,a||y.projectionNodeConstructor),d=function(r,n,o){var a=[];if(e(g),!n)return null;for(var i=0;i<w;i++){var s=h[i],u=y[s],l=u.isEnabled,c=u.Component;l(r)&&c&&a.push(t.createElement(c,p({key:s},r,{visualElement:n})))}return a}(r,v.visualElement)),t.createElement(ht,{visualElement:v.visualElement,props:p(p({},f),r)},d,t.createElement(S.Provider,{value:v},i(l,r,m,function(t,r,n){return u((function(e){var o;e&&(null===(o=t.mount)||void 0===o||o.call(t,e)),r&&(e?r.mount(e):r.unmount()),n&&("function"==typeof n?n(e):V(n)&&(n.current=e))}),[r])}(O,v.visualElement,n),O,f.isStatic,v.visualElement)))}))}var bt=["animate","circle","defs","desc","ellipse","g","image","line","filter","marker","mask","metadata","path","pattern","polygon","polyline","rect","stop","svg","switch","symbol","text","tspan","use","view"];function St(t){return"string"==typeof t&&!t.includes("-")&&!!(bt.indexOf(t)>-1||/[A-Z]/.test(t))}function Ot(t,r){var n=r.layout,e=r.layoutId;return ct(t)||dt(t)||(n||void 0!==e)&&(!!at[t]||"opacity"===t)}var xt={x:"translateX",y:"translateY",z:"translateZ",transformPerspective:"perspective"};function Et(t){return t.startsWith("--")}var jt=function(t,r){return r&&"number"==typeof t?r.transform(t):t};function Pt(t,r,n,e){var o,a=t.style,i=t.vars,s=t.transform,u=t.transformKeys,l=t.transformOrigin;u.length=0;var c=!1,f=!1,d=!0;for(var p in r){var v=r[p];if(Et(p))i[p]=v;else{var m=ot[p],y=jt(v,m);if(ct(p)){if(c=!0,s[p]=y,u.push(p),!d)continue;v!==(null!==(o=m.default)&&void 0!==o?o:0)&&(d=!1)}else dt(p)?(l[p]=y,f=!0):a[p]=y}}c?a.transform=function(t,r,n,e){var o=t.transform,a=t.transformKeys,i=r.enableHardwareAcceleration,s=void 0===i||i,u=r.allowTransformNone,l=void 0===u||u,c="";a.sort(ut);for(var f=!1,d=a.length,p=0;p<d;p++){var v=a[p];c+="".concat(xt[v]||v,"(").concat(o[v],") "),"z"===v&&(f=!0)}return!f&&s?c+="translateZ(0)":c=c.trim(),e?c=e(o,n?"":c):l&&n&&(c="none"),c}(t,n,d,e):e?a.transform=e({},""):!r.transform&&a.transform&&(a.transform="none"),f&&(a.transformOrigin=function(t){var r=t.originX,n=void 0===r?"50%":r,e=t.originY,o=void 0===e?"50%":e,a=t.originZ,i=void 0===a?0:a;return"".concat(n," ").concat(o," ").concat(i)}(l))}var Ct=function(){return{style:{},transform:{},transformKeys:[],transformOrigin:{},vars:{}}};function Tt(t,r,n){for(var e in r)nt(r[e])||Ot(e,n)||(t[e]=r[e])}function Vt(t,r,n){var e={};return Tt(e,t.style||{},t),Object.assign(e,function(t,r,n){var e=t.transformTemplate;return l((function(){var t={style:{},transform:{},transformKeys:[],transformOrigin:{},vars:{}};Pt(t,r,{enableHardwareAcceleration:!n},e);var o=t.style;return p(p({},t.vars),o)}),[r])}(t,r,n)),t.transformValues&&(e=t.transformValues(e)),e}function kt(t,r,n){var e={},o=Vt(t,r,n);return Boolean(t.drag)&&!1!==t.dragListener&&(e.draggable=!1,o.userSelect=o.WebkitUserSelect=o.WebkitTouchCallout="none",o.touchAction=!0===t.drag?"none":"pan-".concat("x"===t.drag?"y":"x")),e.style=o,e}var Lt=new Set(["initial","animate","exit","style","variants","transition","transformTemplate","transformValues","custom","inherit","layout","layoutId","layoutDependency","onLayoutAnimationStart","onLayoutAnimationComplete","onLayoutMeasure","onBeforeLayoutMeasure","onAnimationStart","onAnimationComplete","onUpdate","onDragStart","onDrag","onDragEnd","onMeasureDragConstraints","onDirectionLock","onDragTransitionEnd","drag","dragControls","dragListener","dragConstraints","dragDirectionLock","dragSnapToOrigin","_dragX","_dragY","dragElastic","dragMomentum","dragPropagation","dragTransition","whileDrag","onPan","onPanStart","onPanEnd","onPanSessionStart","onTap","onTapStart","onTapCancel","onHoverStart","onHoverEnd","whileFocus","whileTap","whileHover","whileInView","onViewportEnter","onViewportLeave","viewport","layoutScroll"]);function At(t){return Lt.has(t)}var Mt,Rt=function(t){return!At(t)};try{(Mt=require("@emotion/is-prop-valid").default)&&(Rt=function(t){return t.startsWith("on")?!At(t):Mt(t)})}catch(t){}function Bt(t,r,n){return"string"==typeof t?t:tt.transform(r+n*t)}var Dt={offset:"stroke-dashoffset",array:"stroke-dasharray"},Xt={offset:"strokeDashoffset",array:"strokeDasharray"};function Yt(t,r,n,e){var o=r.attrX,a=r.attrY,i=r.originX,s=r.originY,u=r.pathLength,l=r.pathSpacing,c=void 0===l?1:l,f=r.pathOffset,d=void 0===f?0:f;Pt(t,v(r,["attrX","attrY","originX","originY","pathLength","pathSpacing","pathOffset"]),n,e),t.attrs=t.style,t.style={};var p=t.attrs,m=t.style,y=t.dimensions;p.transform&&(y&&(m.transform=p.transform),delete p.transform),y&&(void 0!==i||void 0!==s||m.transform)&&(m.transformOrigin=function(t,r,n){var e=Bt(r,t.x,t.width),o=Bt(n,t.y,t.height);return"".concat(e," ").concat(o)}(y,void 0!==i?i:.5,void 0!==s?s:.5)),void 0!==o&&(p.x=o),void 0!==a&&(p.y=a),void 0!==u&&function(t,r,n,e,o){void 0===n&&(n=1),void 0===e&&(e=0),void 0===o&&(o=!0),t.pathLength=1;var a=o?Dt:Xt;t[a.offset]=tt.transform(-e);var i=tt.transform(r),s=tt.transform(n);t[a.array]="".concat(i," ").concat(s)}(p,u,c,d,!1)}var Ht=function(){return p(p({},{style:{},transform:{},transformKeys:[],transformOrigin:{},vars:{}}),{attrs:{}})};function It(t,r){var n=l((function(){var n=Ht();return Yt(n,r,{enableHardwareAcceleration:!1},t.transformTemplate),p(p({},n.attrs),{style:p({},n.style)})}),[r]);if(t.style){var e={};Tt(e,t.style,t),n.style=p(p({},e),n.style)}return n}function Wt(t){void 0===t&&(t=!1);return function(r,n,e,o,a,i){var s=a.latestValues,u=(St(r)?It:kt)(n,s,i),l=function(t,r,n){var e={};for(var o in t)(Rt(o)||!0===n&&At(o)||!r&&!At(o)||t.draggable&&o.startsWith("onDrag"))&&(e[o]=t[o]);return e}(n,"string"==typeof r,t),c=p(p(p({},l),u),{ref:o});return e&&(c["data-projection-id"]=e),f(r,c)}}var Ft=/([a-z])([A-Z])/g;var Zt=new Set(["baseFrequency","diffuseConstant","kernelMatrix","kernelUnitLength","keySplines","keyTimes","limitingConeAngle","markerHeight","markerWidth","numOctaves","targetX","targetY","surfaceScale","specularConstant","specularExponent","stdDeviation","tableValues","viewBox","gradientTransform","pathLength"]);function _t(t,r,n,e){for(var o in function(t,r,n,e){var o=r.style,a=r.vars;for(var i in Object.assign(t.style,o,e&&e.getProjectionStyles(n)),a)t.style.setProperty(i,a[i])}(t,r,void 0,e),r.attrs)t.setAttribute(Zt.has(o)?o:o.replace(Ft,"$1-$2").toLowerCase(),r.attrs[o])}function zt(t){var r=t.style,n={};for(var e in r)(nt(r[e])||Ot(e,t))&&(n[e]=r[e]);return n}function Ut(t,r,n,e){var o=t.scrapeMotionValuesFromProps,a=t.createRenderState,i=t.onMount,s={latestValues:Kt(r,n,e,o),renderState:a()};return i&&(s.mount=function(t){return i(r,t,s)}),s}var Nt=function(t){return function(r,n){var o=e(S),a=e(O);return n?Ut(t,r,o,a):R((function(){return Ut(t,r,o,a)}))}};function Kt(t,r,n,e){var o={},a=!1===(null==n?void 0:n.initial),i=e(t);for(var s in i)o[s]=pt(i[s]);var u=t.initial,l=t.animate,c=L(t),f=function(t){return Boolean(L(t)||t.variants)}(t);r&&f&&!c&&!1!==t.inherit&&(null!=u||(u=r.initial),null!=l||(l=r.animate));var d,p=a||!1===u,m=p?l:u;!m||"boolean"==typeof m||"object"==typeof(d=m)&&"function"==typeof d.start||(Array.isArray(m)?m:[m]).forEach((function(r){var n=function(t,r,n,e,o){var a;return void 0===e&&(e={}),void 0===o&&(o={}),"function"==typeof r&&(r=r(null!=n?n:t.custom,e,o)),"string"==typeof r&&(r=null===(a=t.variants)||void 0===a?void 0:a[r]),"function"==typeof r&&(r=r(null!=n?n:t.custom,e,o)),r}(t,r);if(n){var e=n.transitionEnd;n.transition;var a=v(n,["transitionEnd","transition"]);for(var i in a){var s=a[i];if(Array.isArray(s))s=s[p?s.length-1:0];null!==s&&(o[i]=s)}for(var i in e)o[i]=e[i]}}));return o}var $t={useVisualState:Nt({scrapeMotionValuesFromProps:function(t){var r=zt(t);for(var n in t){if(nt(t[n]))r["x"===n||"y"===n?"attr"+n.toUpperCase():n]=t[n]}return r},createRenderState:Ht,onMount:function(t,r,n){var e=n.renderState,o=n.latestValues;try{e.dimensions="function"==typeof r.getBBox?r.getBBox():r.getBoundingClientRect()}catch(t){e.dimensions={x:0,y:0,width:0,height:0}}Yt(e,o,{enableHardwareAcceleration:!1},t.transformTemplate),_t(r,e)}})},qt={useVisualState:Nt({scrapeMotionValuesFromProps:zt,createRenderState:Ct})};var Gt=function(t){function r(r,n){return void 0===n&&(n={}),wt(t(r,n))}if("undefined"==typeof Proxy)return r;var n=new Map;return new Proxy(r,{get:function(t,e){return n.has(e)||n.set(e,r(e)),n.get(e)}})}((function(t,r,n,e,o){var a=r.forwardMotionProps,i=void 0!==a&&a,s=St(t)?$t:qt;return p(p({},s),{preloadedFeatures:n,useRender:Wt(i),createVisualElement:e,projectionNodeConstructor:o,Component:t})}));export{Gt as m};