@cliquify.me/transitions 0.11.17 → 0.11.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.es.js +244 -239
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +2 -2
- package/dist/index.umd.js.map +1 -1
- package/package.json +20 -13
- package/LICENSE +0 -46
- package/src/index.ts +0 -15
package/dist/index.umd.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
(function(f,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("remotion"),require("react/jsx-runtime"),require("react"),require("@remotion/paths"),require("@remotion/shapes")):typeof define=="function"&&define.amd?define(["exports","remotion","react/jsx-runtime","react","@remotion/paths","@remotion/shapes"],s):(f=typeof globalThis<"u"?globalThis:f||self,s(f.transitions={},f.Remotion,f.jsxRuntime,f.React,f.RemotionPaths,f.RemotionShapes))})(this,function(f,s,o,l,B,Y){"use strict";const $=r=>({getDurationInFrames:()=>r.durationInFrames,getProgress:({frame:t})=>s.interpolate(t,[0,r.durationInFrames],[0,1],{easing:r.easing,extrapolateLeft:"clamp",extrapolateRight:"clamp"})}),ie=(r={})=>({getDurationInFrames:({fps:t})=>r.durationInFrames?r.durationInFrames:s.measureSpring({config:r.config,threshold:r.durationRestThreshold,fps:t}),getProgress:({fps:t,frame:e})=>{const n=r.reverse?0:1,a=r.reverse?1:0;return s.spring({fps:t,frame:e,to:n,from:a,config:r.config,durationInFrames:r.durationInFrames,durationRestThreshold:r.durationRestThreshold,reverse:r.reverse})}});typeof window<"u"&&(window.remotion_renderReady=!1,window.remotion_delayRenderTimeouts||(window.remotion_delayRenderTimeouts={}),window.remotion_delayRenderHandles=[]);var ae={"style.transformOrigin":{type:"transform-origin",step:1,default:"50% 50%",description:"Transform origin"},"style.translate":{type:"translate",step:1,default:"0px 0px",description:"Offset"},"style.scale":{type:"scale",max:100,step:.01,default:1,description:"Scale",defaultKeyframeOutput:"perceptual-scale"},"style.rotate":{type:"rotation-css",step:1,default:"0deg",description:"Rotation"},"style.opacity":{type:"number",min:0,max:1,step:.01,default:1,description:"Opacity",hiddenFromList:!1}},le={"style.borderWidth":{type:"number",default:void 0,min:0,step:1,description:"Border width",hiddenFromList:!1},"style.borderStyle":{type:"enum",default:"none",description:"Border style",variants:{none:{},hidden:{},solid:{},dashed:{},dotted:{},double:{},groove:{},ridge:{},inset:{},outset:{}}},"style.borderColor":{type:"color",default:void 0,description:"Border color"}},ue={"style.borderRadius":{type:"number",default:0,min:0,step:1,description:"Border radius",hiddenFromList:!1,keyframable:!0},"style.borderTopLeftRadius":{type:"number",default:0,min:0,step:1,description:"Top left radius",hiddenFromList:!1},"style.borderTopRightRadius":{type:"number",default:0,min:0,step:1,description:"Top right radius",hiddenFromList:!1},"style.borderBottomRightRadius":{type:"number",default:0,min:0,step:1,description:"Bottom right radius",hiddenFromList:!1},"style.borderBottomLeftRadius":{type:"number",default:0,min:0,step:1,description:"Bottom left radius",hiddenFromList:!1}},ce={"style.backgroundColor":{type:"color",default:"transparent",description:"Color"}},de={premountFor:{type:"number",default:0,description:"Premount For",min:0,step:1,hiddenFromList:!1,keyframable:!1},postmountFor:{type:"number",default:0,min:0,step:1,hiddenFromList:!0,keyframable:!1}},fe={...de},he={cropLeft:{type:"number",default:0,description:"Crop left",min:0,max:1,step:.01,hiddenFromList:!1,keyframable:!0},cropRight:{type:"number",default:0,description:"Crop right",min:0,max:1,step:.01,hiddenFromList:!1,keyframable:!0},cropTop:{type:"number",default:0,description:"Crop top",min:0,max:1,step:.01,hiddenFromList:!1,keyframable:!0},cropBottom:{type:"number",default:0,description:"Crop bottom",min:0,max:1,step:.01,hiddenFromList:!1,keyframable:!0}},pe=he,me={...pe,...ae,...ce,...le,...ue,...fe},ge={layout:{type:"enum",default:"absolute-fill",description:"Layout",variants:{"absolute-fill":me,none:{}}}};({...ge.layout});function ye(r,t){const{allowFloats:e,component:n}=t;if(typeof r>"u")throw new Error(`The "durationInFrames" prop ${n} is missing.`);if(typeof r!="number")throw new Error(`The "durationInFrames" prop ${n} must be a number, but you passed a value of type ${typeof r}`);if(r<=0)throw new TypeError(`The "durationInFrames" prop ${n} must be positive, but got ${r}.`);if(!e&&r%1!==0)throw new TypeError(`The "durationInFrames" prop ${n} must be an integer, but got ${r}.`);if(!Number.isFinite(r))throw new TypeError(`The "durationInFrames" prop ${n} must be finite, but got ${r}.`)}var be={validateDurationInFrames:ye};const z=l.createContext(null),D=l.createContext(null),j=({presentationProgress:r,children:t})=>{const e=l.useMemo(()=>({enteringProgress:r}),[r]);return o.jsx(z.Provider,{value:e,children:t})},_=({presentationProgress:r,children:t})=>{const e=l.useMemo(()=>({exitingProgress:r}),[r]);return o.jsx(D.Provider,{value:e,children:t})},V=r=>l.Children.toArray(r).reduce((e,n)=>n.type===l.Fragment?e.concat(V(n.props.children)):(e.push(n),e),[]),we=.01,$e=({children:r,presentationProgress:t,presentationDirection:e,passedProps:{direction:n="from-left",enterStyle:a,exitStyle:u}})=>{const d=l.useMemo(()=>{const i=t===1?t*100:t*100-we;if(e==="exiting")switch(n){case"from-left":return{transform:`translateX(${i}%)`};case"from-right":return{transform:`translateX(${-t*100}%)`};case"from-top":return{transform:`translateY(${i}%)`};case"from-bottom":return{transform:`translateY(${-t*100}%)`};default:throw new Error(`Invalid direction: ${n}`)}switch(n){case"from-left":return{transform:`translateX(${-100+t*100}%)`};case"from-right":return{transform:`translateX(${100-i}%)`};case"from-top":return{transform:`translateY(${-100+t*100}%)`};case"from-bottom":return{transform:`translateY(${100-i}%)`};default:throw new Error(`Invalid direction: ${n}`)}},[e,t,n]),c=l.useMemo(()=>({width:"100%",height:"100%",justifyContent:"center",alignItems:"center",...d,...e==="entering"?a:u}),[d,a,u,e]);return o.jsx(s.AbsoluteFill,{style:c,children:r})},L=r=>({component:$e,props:{}}),Te=be.validateDurationInFrames,C=function(r){return null},N=({children:r})=>o.jsx(o.Fragment,{children:r}),Se=({children:r})=>{const{fps:t}=s.useVideoConfig(),e=s.useCurrentFrame(),n=l.useMemo(()=>{let a=0,u=0;const d=V(r);return l.Children.map(d,(c,i)=>{const g=c;if(typeof g=="string"){if(g.trim()==="")return null;throw new TypeError(`The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> components as its children, but you passed a string "${g}"`)}const p=d[i-1],w=d[i+1],m=typeof p=="string"||typeof p>"u"?null:p.type===C?p:null,y=typeof w=="string"||typeof w>"u"?null:w.type===C?w:null,te=typeof p=="string"||typeof p>"u"?!1:p.type===C;if(g.type===C){if(te)throw new TypeError(`A <TransitionSeries.Transition /> component must not be followed by another <TransitionSeries.Transition /> component (nth children = ${i-1} and ${i})`);return null}if(g.type!==N)throw new TypeError(`The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> and <TransitionSeries.Transition /> components as its children, but got ${g} instead`);const M=g,A=`index = ${i}, duration = ${M.props.durationInFrames}`;if(!(M!=null&&M.props.children))throw new TypeError(`A <TransitionSeries.Sequence /> component (${A}) was detected to not have any children. Delete it to fix this error.`);const T=M.props.durationInFrames,{durationInFrames:S,children:De,...v}=M.props;Te(T,{component:"of a <TransitionSeries.Sequence /> component",allowFloats:!0});const q=M.props.offset??0;if(Number.isNaN(q))throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must not be NaN, but got NaN (${A}).`);if(!Number.isFinite(q))throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${q} (${A}).`);if(q%1!==0)throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${q} (${A}).`);const Oe=u+q;let O=0;m&&(O=m.props.timing.getDurationInFrames({fps:t}),a-=O/2);let h=Oe-O/2;u+=T+q,h<0&&(h=0);const X=y?y.props.timing.getProgress({frame:e-h-S+y.props.timing.getDurationInFrames({fps:t})/2+a,fps:t}):null,k=m?m.props.timing.getProgress({frame:e-h,fps:t}):null,Xe=m?m.props.timing.getProgress({frame:e-(h+S),fps:t}):null;if(y&&T<y.props.timing.getDurationInFrames({fps:t})/2)throw new Error(`The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the next <TransitionSeries.Transition />. The transition is ${y.props.timing.getDurationInFrames({fps:t})} frames long, but the sequence is only ${T} frames long (${A})`);if(m&&T<m.props.timing.getDurationInFrames({fps:t})/2)throw new Error(`The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the previous <TransitionSeries.Transition />. The transition is ${m.props.timing.getDurationInFrames({fps:t})} frames long, but the sequence is only ${T} frames long (${A})`);if(y&&m&&Xe!==null&&k!==null){const I=y.props.presentation??L(),x=m.props.presentation??L(),E=m.props.timing.getDurationInFrames({fps:t}),F=y.props.timing.getDurationInFrames({fps:t}),P=I.component,U=x.component,re=e<+Math.floor(h)+E/2,ne=e>Math.floor(h)+Math.floor(S)+E/2,Ue=ne?Math.floor(h)+Math.floor(S)+Math.floor(F/2):Math.floor(h),oe=re?Math.floor(h):Math.floor(h)+E/2,se=y.props.timing.getProgress({frame:e-(oe+S-F/2),fps:t}),Ye=e>h,ze=e<h+S+F/2+E/2;return o.jsx(s.Freeze,{active:ze&&Ye&&(re||ne),frame:Ue,children:o.jsx(s.Sequence,{from:oe,durationInFrames:T+F/2,...v,name:v.name||"<TS.Sequence>",children:o.jsx(P,{passedProps:I.props??{},presentationDirection:"exiting",presentationProgress:se,presentationDurationInFrames:y.props.timing.getDurationInFrames({fps:t}),onElementImage:()=>{},onUnmount:()=>{},bothEnteringAndExiting:!1,children:o.jsx(_,{presentationProgress:se,children:o.jsx(U,{passedProps:x.props??{},presentationDirection:"entering",presentationProgress:k,presentationDurationInFrames:m.props.timing.getDurationInFrames({fps:t}),onElementImage:()=>{},onUnmount:()=>{},bothEnteringAndExiting:!1,children:o.jsx(j,{presentationProgress:k,children:c})})})})},i)},i)}if(k!==null&&m){const I=m.props.timing.getDurationInFrames({fps:t})/2,x=m.props.presentation??L(),E=x.component,F=e<h+I,P=F?Math.floor(h):Math.floor(h)+I,U=e>P;return o.jsx(s.Freeze,{active:U&&F,frame:P,children:o.jsx(s.Sequence,{from:P,durationInFrames:T,...v,name:v.name||"<TS.Sequence>",children:o.jsx(E,{passedProps:x.props??{},presentationDirection:"entering",presentationProgress:k,presentationDurationInFrames:m.props.timing.getDurationInFrames({fps:t}),onElementImage:()=>{},onUnmount:()=>{},bothEnteringAndExiting:!1,children:o.jsx(j,{presentationProgress:k,children:c})})},i)},i)}if(X!==null&&y){const I=y.props.timing.getDurationInFrames({fps:t})/2,x=y.props.presentation??L(),E=x.component,F=e>Math.floor(S)+Math.floor(h),P=e<Math.floor(S)+Math.floor(h)+I;return o.jsx(s.Freeze,{active:P&&F,frame:Math.floor(S),children:o.jsx(s.Sequence,{from:Math.floor(h),durationInFrames:T+I,...v,name:v.name||"<TS.Sequence>",children:o.jsx(E,{passedProps:x.props??{},presentationDirection:"exiting",presentationProgress:X,presentationDurationInFrames:y.props.timing.getDurationInFrames({fps:t}),onElementImage:()=>{},onUnmount:()=>{},bothEnteringAndExiting:!1,children:o.jsx(_,{presentationProgress:X,children:c})})},i)},i)}return o.jsx(s.Sequence,{from:Math.floor(h),durationInFrames:T,...v,name:v.name||"<TS.Sequence>",children:c},i)})},[r,t,e]);return o.jsx(o.Fragment,{children:n})},b=({children:r,name:t,layout:e,...n})=>{const a=t??"<TransitionSeries>",u=e??"absolute-fill";return o.jsx(s.Sequence,{name:a,layout:u,...n,children:o.jsx(Se,{children:r})})};b.Sequence=N,b.Transition=C,s.Internals.addSequenceStackTraces(b),s.Internals.addSequenceStackTraces(N);const Fe=()=>{const r=l.useContext(z),t=l.useContext(D);return!r&&!t?{isInTransitionSeries:!1,entering:1,exiting:0}:{isInTransitionSeries:!0,entering:(r==null?void 0:r.enteringProgress)??1,exiting:(t==null?void 0:t.exitingProgress)??0}},ve=({children:r,presentationDirection:t,presentationProgress:e,passedProps:n})=>{const u=Math.sqrt(n.width**2+n.height**2)/2*e,d=Ie(n.width/2,n.height/2,u),[c]=l.useState(()=>String(s.random(null))),i=l.useMemo(()=>({width:"100%",height:"100%",clipPath:t==="exiting"?void 0:`url(#${c})`}),[c,t]);return o.jsxs(s.AbsoluteFill,{children:[o.jsx(s.AbsoluteFill,{style:i,children:r}),t==="exiting"?null:o.jsx(s.AbsoluteFill,{children:o.jsx("svg",{width:n.width,height:n.height,children:o.jsx("defs",{children:o.jsx("clipPath",{id:c,children:o.jsx("path",{d,fill:"black"})})})})})]})},H=r=>({component:ve,props:r}),Ie=(r,t,e)=>`M ${r}, ${t}
|
|
1
|
+
(function(f,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("remotion"),require("react/jsx-runtime"),require("react"),require("@remotion/paths"),require("@remotion/shapes")):typeof define=="function"&&define.amd?define(["exports","remotion","react/jsx-runtime","react","@remotion/paths","@remotion/shapes"],i):(f=typeof globalThis<"u"?globalThis:f||self,i(f.transitions={},f.Remotion,f.jsxRuntime,f.React,f.RemotionPaths,f.RemotionShapes))})(this,function(f,i,o,l,W,z){"use strict";const b=r=>({getDurationInFrames:()=>r.durationInFrames,getProgress:({frame:t})=>i.interpolate(t,[0,r.durationInFrames],[0,1],{easing:r.easing,extrapolateLeft:"clamp",extrapolateRight:"clamp"})}),me=(r={})=>({getDurationInFrames:({fps:t})=>r.durationInFrames?r.durationInFrames:i.measureSpring({config:r.config,threshold:r.durationRestThreshold,fps:t}),getProgress:({fps:t,frame:e})=>{const n=r.reverse?0:1,a=r.reverse?1:0;return i.spring({fps:t,frame:e,to:n,from:a,config:r.config,durationInFrames:r.durationInFrames,durationRestThreshold:r.durationRestThreshold,reverse:r.reverse})}});typeof window<"u"&&(window.remotion_renderReady=!1,window.remotion_delayRenderTimeouts||(window.remotion_delayRenderTimeouts={}),window.remotion_delayRenderHandles=[]);var ge={"style.transformOrigin":{type:"transform-origin",step:1,default:"50% 50%",description:"Transform origin"},"style.translate":{type:"translate",step:1,default:"0px 0px",description:"Offset"},"style.scale":{type:"scale",max:100,step:.01,default:1,description:"Scale",defaultKeyframeOutput:"perceptual-scale"},"style.rotate":{type:"rotation-css",step:1,default:"0deg",description:"Rotation"},"style.opacity":{type:"number",min:0,max:1,step:.01,default:1,description:"Opacity",hiddenFromList:!1}},ye={"style.borderWidth":{type:"number",default:void 0,min:0,step:1,description:"Border width",hiddenFromList:!1},"style.borderStyle":{type:"enum",default:"none",description:"Border style",variants:{none:{},hidden:{},solid:{},dashed:{},dotted:{},double:{},groove:{},ridge:{},inset:{},outset:{}}},"style.borderColor":{type:"color",default:void 0,description:"Border color"}},Te={"style.borderRadius":{type:"number",default:0,min:0,step:1,description:"Border radius",hiddenFromList:!1,keyframable:!0},"style.borderTopLeftRadius":{type:"number",default:0,min:0,step:1,description:"Top left radius",hiddenFromList:!1},"style.borderTopRightRadius":{type:"number",default:0,min:0,step:1,description:"Top right radius",hiddenFromList:!1},"style.borderBottomRightRadius":{type:"number",default:0,min:0,step:1,description:"Bottom right radius",hiddenFromList:!1},"style.borderBottomLeftRadius":{type:"number",default:0,min:0,step:1,description:"Bottom left radius",hiddenFromList:!1}},Se={"style.backgroundColor":{type:"color",default:"transparent",description:"Color"}},be={premountFor:{type:"number",default:0,description:"Premount For",min:0,step:1,hiddenFromList:!1,keyframable:!1},postmountFor:{type:"number",default:0,min:0,step:1,hiddenFromList:!0,keyframable:!1}},we={...be},$e={cropLeft:{type:"number",default:0,description:"Crop left",min:0,max:1,step:.01,hiddenFromList:!1,keyframable:!0},cropRight:{type:"number",default:0,description:"Crop right",min:0,max:1,step:.01,hiddenFromList:!1,keyframable:!0},cropTop:{type:"number",default:0,description:"Crop top",min:0,max:1,step:.01,hiddenFromList:!1,keyframable:!0},cropBottom:{type:"number",default:0,description:"Crop bottom",min:0,max:1,step:.01,hiddenFromList:!1,keyframable:!0}},Fe=$e,ve={...Fe,...ge,...Se,...ye,...Te,...we},Ie={layout:{type:"enum",default:"absolute-fill",description:"Layout",variants:{"absolute-fill":ve,none:{}}}};({...Ie.layout});function xe(r,t){const{allowFloats:e,component:n}=t;if(typeof r>"u")throw new Error(`The "durationInFrames" prop ${n} is missing.`);if(typeof r!="number")throw new Error(`The "durationInFrames" prop ${n} must be a number, but you passed a value of type ${typeof r}`);if(r<=0)throw new TypeError(`The "durationInFrames" prop ${n} must be positive, but got ${r}.`);if(!e&&r%1!==0)throw new TypeError(`The "durationInFrames" prop ${n} must be an integer, but got ${r}.`);if(!Number.isFinite(r))throw new TypeError(`The "durationInFrames" prop ${n} must be finite, but got ${r}.`)}var Ee={validateDurationInFrames:xe};const D=l.createContext(null),j=l.createContext(null),_=({presentationProgress:r,children:t})=>{const e=l.useMemo(()=>({enteringProgress:r}),[r]);return o.jsx(D.Provider,{value:e,children:t})},V=({presentationProgress:r,children:t})=>{const e=l.useMemo(()=>({exitingProgress:r}),[r]);return o.jsx(j.Provider,{value:e,children:t})},H=r=>l.Children.toArray(r).reduce((e,n)=>n.type===l.Fragment?e.concat(H(n.props.children)):(e.push(n),e),[]),qe=.01,Me=({children:r,presentationProgress:t,presentationDirection:e,passedProps:{direction:n="from-left",enterStyle:a,exitStyle:u}})=>{const d=l.useMemo(()=>{const s=t===1?t*100:t*100-qe;if(e==="exiting")switch(n){case"from-left":return{transform:`translateX(${s}%)`};case"from-right":return{transform:`translateX(${-t*100}%)`};case"from-top":return{transform:`translateY(${s}%)`};case"from-bottom":return{transform:`translateY(${-t*100}%)`};default:throw new Error(`Invalid direction: ${n}`)}switch(n){case"from-left":return{transform:`translateX(${-100+t*100}%)`};case"from-right":return{transform:`translateX(${100-s}%)`};case"from-top":return{transform:`translateY(${-100+t*100}%)`};case"from-bottom":return{transform:`translateY(${100-s}%)`};default:throw new Error(`Invalid direction: ${n}`)}},[e,t,n]),c=l.useMemo(()=>({width:"100%",height:"100%",justifyContent:"center",alignItems:"center",...d,...e==="entering"?a:u}),[d,a,u,e]);return o.jsx(i.AbsoluteFill,{style:c,children:r})},L=r=>({component:Me,props:{}}),Pe=Ee.validateDurationInFrames,k=function(r){return null};k.isTransitionSeriesTransition=!0;const N=({children:r})=>o.jsx(o.Fragment,{children:r});N.isSeriesSequence=!0;const Ce=({children:r})=>{const{fps:t}=i.useVideoConfig(),e=i.useCurrentFrame(),n=l.useMemo(()=>{let a=0,u=0;const d=H(r);return l.Children.map(d,(c,s)=>{var ne,oe,ie,se,ae,le,ue,ce;const p=c;if(typeof p=="string"){if(p.trim()==="")return null;throw new TypeError(`The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> components as its children, but you passed a string "${p}"`)}const h=d[s-1],y=d[s+1],B=typeof h!="string"&&typeof h<"u"&&(h.type===k||((ne=h.type)==null?void 0:ne.isTransitionSeriesTransition)||((oe=h.type)==null?void 0:oe.name)==="TransitionSeriesTransition"),g=typeof h=="string"||typeof h>"u"?null:B?h:null,re=typeof y!="string"&&typeof y<"u"&&(y.type===k||((ie=y.type)==null?void 0:ie.isTransitionSeriesTransition)||((se=y.type)==null?void 0:se.name)==="TransitionSeriesTransition"),T=typeof y=="string"||typeof y>"u"?null:re?y:null,He=B;if(p.type===k||((ae=p.type)==null?void 0:ae.isTransitionSeriesTransition)||((le=p.type)==null?void 0:le.name)==="TransitionSeriesTransition"){if(He)throw new TypeError(`A <TransitionSeries.Transition /> component must not be followed by another <TransitionSeries.Transition /> component (nth children = ${s-1} and ${s})`);return null}if(!(p.type===N||((ue=p.type)==null?void 0:ue.isSeriesSequence)||((ce=p.type)==null?void 0:ce.name)==="SeriesSequence"))throw new TypeError(`The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> and <TransitionSeries.Transition /> components as its children, but got ${p} instead`);const q=p,C=`index = ${s}, duration = ${q.props.durationInFrames}`;if(!(q!=null&&q.props.children))throw new TypeError(`A <TransitionSeries.Sequence /> component (${C}) was detected to not have any children. Delete it to fix this error.`);const w=q.props.durationInFrames,{durationInFrames:$,children:tt,...v}=q.props;Pe(w,{component:"of a <TransitionSeries.Sequence /> component",allowFloats:!0});const M=q.props.offset??0;if(Number.isNaN(M))throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must not be NaN, but got NaN (${C}).`);if(!Number.isFinite(M))throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${M} (${C}).`);if(M%1!==0)throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${M} (${C}).`);const Je=u+M;let X=0;g&&(X=g.props.timing.getDurationInFrames({fps:t}),a-=X/2);let m=Je-X/2;u+=w+M,m<0&&(m=0);const U=T?T.props.timing.getProgress({frame:e-m-$+T.props.timing.getDurationInFrames({fps:t})/2+a,fps:t}):null,A=g?g.props.timing.getProgress({frame:e-m,fps:t}):null,Ke=g?g.props.timing.getProgress({frame:e-(m+$),fps:t}):null;if(T&&w<T.props.timing.getDurationInFrames({fps:t})/2)throw new Error(`The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the next <TransitionSeries.Transition />. The transition is ${T.props.timing.getDurationInFrames({fps:t})} frames long, but the sequence is only ${w} frames long (${C})`);if(g&&w<g.props.timing.getDurationInFrames({fps:t})/2)throw new Error(`The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the previous <TransitionSeries.Transition />. The transition is ${g.props.timing.getDurationInFrames({fps:t})} frames long, but the sequence is only ${w} frames long (${C})`);if(T&&g&&Ke!==null&&A!==null){const I=T.props.presentation??L(),x=g.props.presentation??L(),E=g.props.timing.getDurationInFrames({fps:t}),F=T.props.timing.getDurationInFrames({fps:t}),P=I.component,Y=x.component,de=e<+Math.floor(m)+E/2,fe=e>Math.floor(m)+Math.floor($)+E/2,Ge=fe?Math.floor(m)+Math.floor($)+Math.floor(F/2):Math.floor(m),pe=de?Math.floor(m):Math.floor(m)+E/2,he=T.props.timing.getProgress({frame:e-(pe+$-F/2),fps:t}),Qe=e>m,Ze=e<m+$+F/2+E/2;return o.jsx(i.Freeze,{active:Ze&&Qe&&(de||fe),frame:Ge,children:o.jsx(i.Sequence,{from:pe,durationInFrames:w+F/2,...v,name:v.name||"<TS.Sequence>",children:o.jsx(P,{passedProps:I.props??{},presentationDirection:"exiting",presentationProgress:he,presentationDurationInFrames:T.props.timing.getDurationInFrames({fps:t}),onElementImage:()=>{},onUnmount:()=>{},bothEnteringAndExiting:!1,children:o.jsx(V,{presentationProgress:he,children:o.jsx(Y,{passedProps:x.props??{},presentationDirection:"entering",presentationProgress:A,presentationDurationInFrames:g.props.timing.getDurationInFrames({fps:t}),onElementImage:()=>{},onUnmount:()=>{},bothEnteringAndExiting:!1,children:o.jsx(_,{presentationProgress:A,children:c})})})})},s)},s)}if(A!==null&&g){const I=g.props.timing.getDurationInFrames({fps:t})/2,x=g.props.presentation??L(),E=x.component,F=e<m+I,P=F?Math.floor(m):Math.floor(m)+I,Y=e>P;return o.jsx(i.Freeze,{active:Y&&F,frame:P,children:o.jsx(i.Sequence,{from:P,durationInFrames:w,...v,name:v.name||"<TS.Sequence>",children:o.jsx(E,{passedProps:x.props??{},presentationDirection:"entering",presentationProgress:A,presentationDurationInFrames:g.props.timing.getDurationInFrames({fps:t}),onElementImage:()=>{},onUnmount:()=>{},bothEnteringAndExiting:!1,children:o.jsx(_,{presentationProgress:A,children:c})})},s)},s)}if(U!==null&&T){const I=T.props.timing.getDurationInFrames({fps:t})/2,x=T.props.presentation??L(),E=x.component,F=e>Math.floor($)+Math.floor(m),P=e<Math.floor($)+Math.floor(m)+I;return o.jsx(i.Freeze,{active:P&&F,frame:Math.floor($),children:o.jsx(i.Sequence,{from:Math.floor(m),durationInFrames:w+I,...v,name:v.name||"<TS.Sequence>",children:o.jsx(E,{passedProps:x.props??{},presentationDirection:"exiting",presentationProgress:U,presentationDurationInFrames:T.props.timing.getDurationInFrames({fps:t}),onElementImage:()=>{},onUnmount:()=>{},bothEnteringAndExiting:!1,children:o.jsx(V,{presentationProgress:U,children:c})})},s)},s)}return o.jsx(i.Sequence,{from:Math.floor(m),durationInFrames:w,...v,name:v.name||"<TS.Sequence>",children:c},s)})},[r,t,e]);return o.jsx(o.Fragment,{children:n})},S=({children:r,name:t,layout:e,...n})=>{const a=t??"<TransitionSeries>",u=e??"absolute-fill";return o.jsx(i.Sequence,{name:a,layout:u,...n,children:o.jsx(Ce,{children:r})})};S.Sequence=N,S.Transition=k,i.Internals.addSequenceStackTraces(S),i.Internals.addSequenceStackTraces(N);const Ae=()=>{const r=l.useContext(D),t=l.useContext(j);return!r&&!t?{isInTransitionSeries:!1,entering:1,exiting:0}:{isInTransitionSeries:!0,entering:(r==null?void 0:r.enteringProgress)??1,exiting:(t==null?void 0:t.exitingProgress)??0}},ke=({children:r,presentationDirection:t,presentationProgress:e,passedProps:n})=>{const u=Math.sqrt(n.width**2+n.height**2)/2*e,d=Le(n.width/2,n.height/2,u),[c]=l.useState(()=>String(i.random(null))),s=l.useMemo(()=>({width:"100%",height:"100%",clipPath:t==="exiting"?void 0:`url(#${c})`}),[c,t]);return o.jsxs(i.AbsoluteFill,{children:[o.jsx(i.AbsoluteFill,{style:s,children:r}),t==="exiting"?null:o.jsx(i.AbsoluteFill,{children:o.jsx("svg",{width:n.width,height:n.height,children:o.jsx("defs",{children:o.jsx("clipPath",{id:c,children:o.jsx("path",{d,fill:"black"})})})})})]})},J=r=>({component:ke,props:r}),Le=(r,t,e)=>`M ${r}, ${t}
|
|
2
2
|
m -${e}, 0
|
|
3
3
|
a ${e},${e} 0 1,0 ${e*2},0
|
|
4
|
-
a ${e},${e} 0 1,0 -${e*2},0`,
|
|
4
|
+
a ${e},${e} 0 1,0 -${e*2},0`,Ne=({children:r,presentationDirection:t,presentationProgress:e,passedProps:n})=>{const{width:a,height:u}=n,d=a*e,c=u*e,s=a/2-d/2,p=u/2-c/2,[h]=l.useState(()=>String(i.random(null))),y=l.useMemo(()=>({width:"100%",height:"100%",clipPath:t==="exiting"?void 0:`url(#${h})`}),[h,t]);return o.jsxs(i.AbsoluteFill,{children:[o.jsx(i.AbsoluteFill,{style:y,children:r}),t==="exiting"?null:o.jsx(i.AbsoluteFill,{children:o.jsx("svg",{children:o.jsx("defs",{children:o.jsx("clipPath",{id:h,children:o.jsx("rect",{x:s,y:p,width:d,height:c,fill:"black"})})})})})]})},K=r=>({component:Ne,props:r}),Be=({children:r,presentationDirection:t,presentationProgress:e,passedProps:n})=>{const a=Math.sqrt(n.width**2+n.height**2)/2,u=a*e,d=a*2*e,{path:c}=z.makeStar({innerRadius:u,outerRadius:d,points:5}),s=W.getBoundingBox(c),p=W.translatePath(c,n.width/2-s.width/2,n.height/2-s.height/2),[h]=l.useState(()=>String(i.random(null))),y=l.useMemo(()=>({width:"100%",height:"100%",clipPath:t==="exiting"?void 0:`url(#${h})`}),[h,t]);return o.jsxs(i.AbsoluteFill,{children:[o.jsx(i.AbsoluteFill,{style:y,children:r}),t==="exiting"?null:o.jsx(i.AbsoluteFill,{children:o.jsx("svg",{children:o.jsx("defs",{children:o.jsx("clipPath",{id:h,children:o.jsx("path",{d:p,fill:"black"})})})})})]})},G=r=>({component:Be,props:r}),We=({children:r,presentationDirection:t,presentationProgress:e,passedProps:n})=>{const{width:a,height:u}=n,d=a*e,c=a/2-d/2,[s]=l.useState(()=>String(i.random(null))),p=l.useMemo(()=>({width:"100%",height:"100%",clipPath:t==="exiting"?void 0:`url(#${s})`}),[s,t]);return o.jsxs(i.AbsoluteFill,{children:[o.jsx(i.AbsoluteFill,{style:p,children:r}),t==="exiting"?null:o.jsx(i.AbsoluteFill,{children:o.jsx("svg",{children:o.jsx("defs",{children:o.jsx("clipPath",{id:s,children:o.jsx("rect",{x:c,y:0,width:d,height:u,fill:"black"})})})})})]})},Q=r=>({component:We,props:r});var Oe=({children:r,presentationDirection:t,presentationProgress:e,passedProps:n})=>{const a=t==="entering",u=l.useMemo(()=>({opacity:a?e:n.shouldFadeOutExitingScene?1-e:1,...t==="entering"?n.enterStyle:n.exitStyle}),[a,n.enterStyle,n.exitStyle,n.shouldFadeOutExitingScene,t,e]);return o.jsx(i.AbsoluteFill,{style:u,children:r})},O=r=>({component:Oe,props:r??{}}),Xe=.01,Ue=({children:r,presentationProgress:t,presentationDirection:e,passedProps:{direction:n="from-left",enterStyle:a,exitStyle:u}})=>{const d=l.useMemo(()=>{const s=t===1?t*100:t*100-Xe;if(e==="exiting")switch(n){case"from-left":return{transform:`translateX(${s}%)`};case"from-right":return{transform:`translateX(${-t*100}%)`};case"from-top":return{transform:`translateY(${s}%)`};case"from-bottom":return{transform:`translateY(${-t*100}%)`};default:throw new Error(`Invalid direction: ${n}`)}switch(n){case"from-left":return{transform:`translateX(${-100+t*100}%)`};case"from-right":return{transform:`translateX(${100-s}%)`};case"from-top":return{transform:`translateY(${-100+t*100}%)`};case"from-bottom":return{transform:`translateY(${100-s}%)`};default:throw new Error(`Invalid direction: ${n}`)}},[e,t,n]),c=l.useMemo(()=>({width:"100%",height:"100%",justifyContent:"center",alignItems:"center",...d,...e==="entering"?a:u}),[d,a,u,e]);return o.jsx(i.AbsoluteFill,{style:c,children:r})},Z=r=>({component:Ue,props:r??{}}),Ye=(r,t)=>{const e=r*100;switch(t){case"from-left":return`polygon(0% 0%, ${e}% 0%, ${e}% 100%, 0% 100%)`;case"from-top-left":return`polygon(0% 0%, ${e*2}% 0%, 0% ${e*2}%)`;case"from-top":return`polygon(0% 0%, 100% 0%, 100% ${e}%, 0% ${e}%)`;case"from-top-right":return`polygon(100% 0%, ${100-e*2}% 0%, 100% ${e*2}%)`;case"from-right":return`polygon(100% 0%, 100% 100%, ${100-e}% 100%, ${100-e}% 0%)`;case"from-bottom-right":return`polygon(100% 100%, ${100-e*2}% 100%, 100% ${100-e*2}%)`;case"from-bottom":return`polygon(0% 100%, 100% 100%, 100% ${100-e}%, 0% ${100-e}%)`;case"from-bottom-left":return`polygon(0% 100%, 0% ${100-e*2}%, ${e*2}% 100%)`;default:throw new Error(`Unknown direction ${JSON.stringify(t)}`)}},ze=(r,t)=>{const e=r*100;switch(t){case"from-left":return`polygon(100% 100%, ${100-e}% 100%, ${100-e}% 0%, 100% 0%)`;case"from-top-left":return`polygon(100% 100%, ${100-e*2}% 100%, 100% ${100-e*2}%)`;case"from-top":return`polygon(100% 100%, 0% 100%, 0% ${100-e}%, 100% ${100-e}%)`;case"from-top-right":return`polygon(0% 100%, ${e*2}% 100%, 0% ${100-e*2}%)`;case"from-right":return`polygon(0% 0%, ${e}% 0%, ${e}% 100%, 0% 100%)`;case"from-bottom-right":return`polygon(0% 0%, ${e*2}% 0%, 0% ${e*2}%)`;case"from-bottom":return`polygon(100% 0%, 0% 0%, 0% ${e}%, 100% ${e}%)`;case"from-bottom-left":return`polygon(100% 0%, ${100-e*2}% 0%, 100% ${e*2}%)`;default:throw new Error(`Unknown direction ${JSON.stringify(t)}`)}},De=({children:r,presentationProgress:t,presentationDirection:e,passedProps:{direction:n="from-left",innerEnterStyle:a,innerExitStyle:u,outerEnterStyle:d,outerExitStyle:c}})=>{const s=e==="entering"?t:1-t,p=e==="entering"?Ye(s,n):ze(s,n),h=l.useMemo(()=>({width:"100%",height:"100%",justifyContent:"center",alignItems:"center",clipPath:p,...e==="entering"?a:u}),[p,a,u,e]),y=l.useMemo(()=>e==="entering"?d:c,[d,c,e]);return o.jsx(i.AbsoluteFill,{style:y,children:o.jsx(i.AbsoluteFill,{style:h,children:r})})},R=r=>({component:De,props:r??{}}),je=({children:r,presentationDirection:t,presentationProgress:e,passedProps:{direction:n="from-left",perspective:a=1e3,innerEnterStyle:u,innerExitStyle:d,outerEnterStyle:c,outerExitStyle:s}})=>{const p=l.useMemo(()=>{const y=n==="from-right"||n==="from-top"?180:-180,B=n==="from-right"||n==="from-top"?-180:180,g=t==="entering"?i.interpolate(e,[0,1],[y,0]):i.interpolate(e,[0,1],[0,B]);return{width:"100%",height:"100%",transform:`${n==="from-top"||n==="from-bottom"?"rotateX":"rotateY"}(${g}deg)`,backfaceVisibility:"hidden",WebkitBackfaceVisibility:"hidden",...t==="entering"?u:d}},[n,u,d,t,e]),h=l.useMemo(()=>({perspective:a,transformStyle:"preserve-3d",...t==="entering"?c:s}),[c,s,a,t]);return o.jsx(i.AbsoluteFill,{style:h,children:o.jsx(i.AbsoluteFill,{style:p,children:r})})},ee=r=>({component:je,props:r??{}}),_e=({children:r,presentationDirection:t,presentationProgress:e,passedProps:n})=>{const a=Math.sqrt(n.width**2+n.height**2)/2,{path:u}=z.makePie({radius:a,progress:e}),d=W.translatePath(u,-(a*2-n.width)/2,-(a*2-n.height)/2),c=l.useMemo(()=>({width:"100%",height:"100%",clipPath:t==="exiting"?void 0:`path("${d}")`,...t==="entering"?n.innerEnterStyle:n.innerExitStyle}),[d,n.innerEnterStyle,n.innerExitStyle,t]),s=l.useMemo(()=>t==="entering"?n.outerEnterStyle:n.outerExitStyle,[n.outerEnterStyle,n.outerExitStyle,t]);return o.jsx(i.AbsoluteFill,{style:s,children:o.jsx(i.AbsoluteFill,{style:c,children:r})})},te=r=>({component:_e,props:r??{}});const Ve={none:({id:r})=>o.jsx(S.Transition,{presentation:O(),timing:b({durationInFrames:1})},r),fade:({durationInFrames:r,id:t})=>o.jsx(S.Transition,{presentation:O(),timing:b({durationInFrames:r})},t),slide:({durationInFrames:r,id:t,direction:e})=>o.jsx(S.Transition,{presentation:Z({direction:e}),timing:b({durationInFrames:r})},t),wipe:({durationInFrames:r,id:t,direction:e})=>o.jsx(S.Transition,{presentation:R({direction:e}),timing:b({durationInFrames:r})},t),flip:({durationInFrames:r,id:t})=>o.jsx(S.Transition,{presentation:ee(),timing:b({durationInFrames:r})},t),clockWipe:({width:r,height:t,durationInFrames:e,id:n})=>o.jsx(S.Transition,{presentation:te({width:r,height:t}),timing:b({durationInFrames:e})},n),star:({width:r,height:t,durationInFrames:e,id:n})=>o.jsx(S.Transition,{presentation:G({width:r,height:t}),timing:b({durationInFrames:e})},n),circle:({width:r,height:t,durationInFrames:e,id:n})=>o.jsx(S.Transition,{presentation:J({width:r,height:t}),timing:b({durationInFrames:e})},n),rectangle:({width:r,height:t,durationInFrames:e,id:n})=>o.jsx(S.Transition,{presentation:K({width:r,height:t}),timing:b({durationInFrames:e})},n),slidingDoors:({width:r,height:t,durationInFrames:e,id:n})=>o.jsx(S.Transition,{presentation:Q({width:r,height:t}),timing:b({durationInFrames:e})},n)};f.TransitionSeries=S,f.Transitions=Ve,f.circle=J,f.clockWipe=te,f.fade=O,f.flip=ee,f.linearTiming=b,f.rectangle=K,f.slide=Z,f.slidingDoors=Q,f.springTiming=me,f.star=G,f.useTransitionProgress=Ae,f.wipe=R,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});
|
|
5
5
|
//# sourceMappingURL=index.umd.js.map
|