@cliquify.me/transitions 0.11.18 → 1.0.1
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 +427 -392
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +2 -2
- package/dist/index.umd.js.map +1 -1
- package/dist/presentations/circle-reveal.d.ts +7 -0
- package/dist/presentations/index.d.ts +1 -0
- package/package.json +1 -1
package/dist/index.umd.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
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}
|
|
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,d,B,z){"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"}},ce={"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}},ue={"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,...ue,...le,...ce,...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 j=d.createContext(null),D=d.createContext(null),_=({presentationProgress:r,children:t})=>{const e=d.useMemo(()=>({enteringProgress:r}),[r]);return o.jsx(j.Provider,{value:e,children:t})},V=({presentationProgress:r,children:t})=>{const e=d.useMemo(()=>({exitingProgress:r}),[r]);return o.jsx(D.Provider,{value:e,children:t})},H=r=>d.Children.toArray(r).reduce((e,n)=>n.type===d.Fragment?e.concat(H(n.props.children)):(e.push(n),e),[]),we=.01,$e=({children:r,presentationProgress:t,presentationDirection:e,passedProps:{direction:n="from-left",enterStyle:a,exitStyle:c}})=>{const u=d.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]),l=d.useMemo(()=>({width:"100%",height:"100%",justifyContent:"center",alignItems:"center",...u,...e==="entering"?a:c}),[u,a,c,e]);return o.jsx(s.AbsoluteFill,{style:l,children:r})},L=r=>({component:$e,props:{}}),Fe=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=d.useMemo(()=>{let a=0,c=0;const u=H(r);return d.Children.map(u,(l,i)=>{const m=l;if(typeof m=="string"){if(m.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 "${m}"`)}const h=u[i-1],b=u[i+1],p=typeof h=="string"||typeof h>"u"?null:h.type===C?h:null,y=typeof b=="string"||typeof b>"u"?null:b.type===C?b:null,W=typeof h=="string"||typeof h>"u"?!1:h.type===C;if(m.type===C){if(W)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(m.type!==N)throw new TypeError(`The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> and <TransitionSeries.Transition /> components as its children, but got ${m} instead`);const M=m,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 F=M.props.durationInFrames,{durationInFrames:S,children:_e,...v}=M.props;Fe(F,{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 Ue=c+q;let X=0;p&&(X=p.props.timing.getDurationInFrames({fps:t}),a-=X/2);let g=Ue-X/2;c+=F+q,g<0&&(g=0);const U=y?y.props.timing.getProgress({frame:e-g-S+y.props.timing.getDurationInFrames({fps:t})/2+a,fps:t}):null,k=p?p.props.timing.getProgress({frame:e-g,fps:t}):null,Ye=p?p.props.timing.getProgress({frame:e-(g+S),fps:t}):null;if(y&&F<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 ${F} frames long (${A})`);if(p&&F<p.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 ${p.props.timing.getDurationInFrames({fps:t})} frames long, but the sequence is only ${F} frames long (${A})`);if(y&&p&&Ye!==null&&k!==null){const I=y.props.presentation??L(),x=p.props.presentation??L(),E=p.props.timing.getDurationInFrames({fps:t}),T=y.props.timing.getDurationInFrames({fps:t}),P=I.component,Y=x.component,re=e<+Math.floor(g)+E/2,ne=e>Math.floor(g)+Math.floor(S)+E/2,ze=ne?Math.floor(g)+Math.floor(S)+Math.floor(T/2):Math.floor(g),oe=re?Math.floor(g):Math.floor(g)+E/2,se=y.props.timing.getProgress({frame:e-(oe+S-T/2),fps:t}),je=e>g,De=e<g+S+T/2+E/2;return o.jsx(s.Freeze,{active:De&&je&&(re||ne),frame:ze,children:o.jsx(s.Sequence,{from:oe,durationInFrames:F+T/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(V,{presentationProgress:se,children:o.jsx(Y,{passedProps:x.props??{},presentationDirection:"entering",presentationProgress:k,presentationDurationInFrames:p.props.timing.getDurationInFrames({fps:t}),onElementImage:()=>{},onUnmount:()=>{},bothEnteringAndExiting:!1,children:o.jsx(_,{presentationProgress:k,children:l})})})})},i)},i)}if(k!==null&&p){const I=p.props.timing.getDurationInFrames({fps:t})/2,x=p.props.presentation??L(),E=x.component,T=e<g+I,P=T?Math.floor(g):Math.floor(g)+I,Y=e>P;return o.jsx(s.Freeze,{active:Y&&T,frame:P,children:o.jsx(s.Sequence,{from:P,durationInFrames:F,...v,name:v.name||"<TS.Sequence>",children:o.jsx(E,{passedProps:x.props??{},presentationDirection:"entering",presentationProgress:k,presentationDurationInFrames:p.props.timing.getDurationInFrames({fps:t}),onElementImage:()=>{},onUnmount:()=>{},bothEnteringAndExiting:!1,children:o.jsx(_,{presentationProgress:k,children:l})})},i)},i)}if(U!==null&&y){const I=y.props.timing.getDurationInFrames({fps:t})/2,x=y.props.presentation??L(),E=x.component,T=e>Math.floor(S)+Math.floor(g),P=e<Math.floor(S)+Math.floor(g)+I;return o.jsx(s.Freeze,{active:P&&T,frame:Math.floor(S),children:o.jsx(s.Sequence,{from:Math.floor(g),durationInFrames:F+I,...v,name:v.name||"<TS.Sequence>",children:o.jsx(E,{passedProps:x.props??{},presentationDirection:"exiting",presentationProgress:U,presentationDurationInFrames:y.props.timing.getDurationInFrames({fps:t}),onElementImage:()=>{},onUnmount:()=>{},bothEnteringAndExiting:!1,children:o.jsx(V,{presentationProgress:U,children:l})})},i)},i)}return o.jsx(s.Sequence,{from:Math.floor(g),durationInFrames:F,...v,name:v.name||"<TS.Sequence>",children:l},i)})},[r,t,e]);return o.jsx(o.Fragment,{children:n})},w=({children:r,name:t,layout:e,...n})=>{const a=t??"<TransitionSeries>",c=e??"absolute-fill";return o.jsx(s.Sequence,{name:a,layout:c,...n,children:o.jsx(Se,{children:r})})};w.Sequence=N,w.Transition=C,s.Internals.addSequenceStackTraces(w),s.Internals.addSequenceStackTraces(N);const Te=()=>{const r=d.useContext(j),t=d.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 c=Math.sqrt(n.width**2+n.height**2)/2*e,u=Ie(n.width/2,n.height/2,c),[l]=d.useState(()=>String(s.random(null))),i=d.useMemo(()=>({width:"100%",height:"100%",clipPath:t==="exiting"?void 0:`url(#${l})`}),[l,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:l,children:o.jsx("path",{d:u,fill:"black"})})})})})]})},J=r=>({component:ve,props:r}),Ie=(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`,xe=({children:r,presentationDirection:t,presentationProgress:e,passedProps:n})=>{const{width:a,height:c}=n,u=-a*.35,l=c*.52,i=Math.sqrt((a-u)**2+Math.max(l,c-l)**2),m=a*.3,h=m+(i-m+a*.1)*e,[b]=d.useState(()=>String(s.random(null))),p=Math.max(3,Math.round(a*.007)),y=Math.max(0,h-p/2),W=d.useMemo(()=>({width:"100%",height:"100%",clipPath:t==="exiting"?void 0:`url(#${b})`}),[b,t]);return o.jsxs(s.AbsoluteFill,{children:[o.jsx(s.AbsoluteFill,{style:W,children:r}),t==="exiting"?null:o.jsx(s.AbsoluteFill,{style:{pointerEvents:"none"},children:o.jsxs("svg",{width:a,height:c,style:{position:"absolute",inset:0,width:"100%",height:"100%"},children:[o.jsx("defs",{children:o.jsx("clipPath",{id:b,children:o.jsx("circle",{cx:u,cy:l,r:h,fill:"black"})})}),e>0&&e<1&&o.jsx("circle",{cx:u,cy:l,r:y,fill:"none",stroke:"#1e3a8a",strokeWidth:p})]})})]})},Ee=r=>({component:xe,props:r}),Me=({children:r,presentationDirection:t,presentationProgress:e,passedProps:n})=>{const{width:a,height:c}=n,u=a*e,l=c*e,i=a/2-u/2,m=c/2-l/2,[h]=d.useState(()=>String(s.random(null))),b=d.useMemo(()=>({width:"100%",height:"100%",clipPath:t==="exiting"?void 0:`url(#${h})`}),[h,t]);return o.jsxs(s.AbsoluteFill,{children:[o.jsx(s.AbsoluteFill,{style:b,children:r}),t==="exiting"?null:o.jsx(s.AbsoluteFill,{children:o.jsx("svg",{children:o.jsx("defs",{children:o.jsx("clipPath",{id:h,children:o.jsx("rect",{x:i,y:m,width:u,height:l,fill:"black"})})})})})]})},K=r=>({component:Me,props:r}),qe=({children:r,presentationDirection:t,presentationProgress:e,passedProps:n})=>{const a=Math.sqrt(n.width**2+n.height**2)/2,c=a*e,u=a*2*e,{path:l}=z.makeStar({innerRadius:c,outerRadius:u,points:5}),i=B.getBoundingBox(l),m=B.translatePath(l,n.width/2-i.width/2,n.height/2-i.height/2),[h]=d.useState(()=>String(s.random(null))),b=d.useMemo(()=>({width:"100%",height:"100%",clipPath:t==="exiting"?void 0:`url(#${h})`}),[h,t]);return o.jsxs(s.AbsoluteFill,{children:[o.jsx(s.AbsoluteFill,{style:b,children:r}),t==="exiting"?null:o.jsx(s.AbsoluteFill,{children:o.jsx("svg",{children:o.jsx("defs",{children:o.jsx("clipPath",{id:h,children:o.jsx("path",{d:m,fill:"black"})})})})})]})},G=r=>({component:qe,props:r}),Pe=({children:r,presentationDirection:t,presentationProgress:e,passedProps:n})=>{const{width:a,height:c}=n,u=a*e,l=a/2-u/2,[i]=d.useState(()=>String(s.random(null))),m=d.useMemo(()=>({width:"100%",height:"100%",clipPath:t==="exiting"?void 0:`url(#${i})`}),[i,t]);return o.jsxs(s.AbsoluteFill,{children:[o.jsx(s.AbsoluteFill,{style:m,children:r}),t==="exiting"?null:o.jsx(s.AbsoluteFill,{children:o.jsx("svg",{children:o.jsx("defs",{children:o.jsx("clipPath",{id:i,children:o.jsx("rect",{x:l,y:0,width:u,height:c,fill:"black"})})})})})]})},Q=r=>({component:Pe,props:r});var Ae=({children:r,presentationDirection:t,presentationProgress:e,passedProps:n})=>{const a=t==="entering",c=d.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(s.AbsoluteFill,{style:c,children:r})},O=r=>({component:Ae,props:r??{}}),ke=.01,Ce=({children:r,presentationProgress:t,presentationDirection:e,passedProps:{direction:n="from-left",enterStyle:a,exitStyle:c}})=>{const u=d.useMemo(()=>{const i=t===1?t*100:t*100-ke;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]),l=d.useMemo(()=>({width:"100%",height:"100%",justifyContent:"center",alignItems:"center",...u,...e==="entering"?a:c}),[u,a,c,e]);return o.jsx(s.AbsoluteFill,{style:l,children:r})},Z=r=>({component:Ce,props:r??{}}),Le=(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)}`)}},We=(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)}`)}},Be=({children:r,presentationProgress:t,presentationDirection:e,passedProps:{direction:n="from-left",innerEnterStyle:a,innerExitStyle:c,outerEnterStyle:u,outerExitStyle:l}})=>{const i=e==="entering"?t:1-t,m=e==="entering"?Le(i,n):We(i,n),h=d.useMemo(()=>({width:"100%",height:"100%",justifyContent:"center",alignItems:"center",clipPath:m,...e==="entering"?a:c}),[m,a,c,e]),b=d.useMemo(()=>e==="entering"?u:l,[u,l,e]);return o.jsx(s.AbsoluteFill,{style:b,children:o.jsx(s.AbsoluteFill,{style:h,children:r})})},R=r=>({component:Be,props:r??{}}),Ne=({children:r,presentationDirection:t,presentationProgress:e,passedProps:{direction:n="from-left",perspective:a=1e3,innerEnterStyle:c,innerExitStyle:u,outerEnterStyle:l,outerExitStyle:i}})=>{const m=d.useMemo(()=>{const b=n==="from-right"||n==="from-top"?180:-180,p=n==="from-right"||n==="from-top"?-180:180,y=t==="entering"?s.interpolate(e,[0,1],[b,0]):s.interpolate(e,[0,1],[0,p]);return{width:"100%",height:"100%",transform:`${n==="from-top"||n==="from-bottom"?"rotateX":"rotateY"}(${y}deg)`,backfaceVisibility:"hidden",WebkitBackfaceVisibility:"hidden",...t==="entering"?c:u}},[n,c,u,t,e]),h=d.useMemo(()=>({perspective:a,transformStyle:"preserve-3d",...t==="entering"?l:i}),[l,i,a,t]);return o.jsx(s.AbsoluteFill,{style:h,children:o.jsx(s.AbsoluteFill,{style:m,children:r})})},ee=r=>({component:Ne,props:r??{}}),Oe=({children:r,presentationDirection:t,presentationProgress:e,passedProps:n})=>{const a=Math.sqrt(n.width**2+n.height**2)/2,{path:c}=z.makePie({radius:a,progress:e}),u=B.translatePath(c,-(a*2-n.width)/2,-(a*2-n.height)/2),l=d.useMemo(()=>({width:"100%",height:"100%",clipPath:t==="exiting"?void 0:`path("${u}")`,...t==="entering"?n.innerEnterStyle:n.innerExitStyle}),[u,n.innerEnterStyle,n.innerExitStyle,t]),i=d.useMemo(()=>t==="entering"?n.outerEnterStyle:n.outerExitStyle,[n.outerEnterStyle,n.outerExitStyle,t]);return o.jsx(s.AbsoluteFill,{style:i,children:o.jsx(s.AbsoluteFill,{style:l,children:r})})},te=r=>({component:Oe,props:r??{}});const Xe={none:({id:r})=>o.jsx(w.Transition,{presentation:O(),timing:$({durationInFrames:1})},r),fade:({durationInFrames:r,id:t})=>o.jsx(w.Transition,{presentation:O(),timing:$({durationInFrames:r})},t),slide:({durationInFrames:r,id:t,direction:e})=>o.jsx(w.Transition,{presentation:Z({direction:e}),timing:$({durationInFrames:r})},t),wipe:({durationInFrames:r,id:t,direction:e})=>o.jsx(w.Transition,{presentation:R({direction:e}),timing:$({durationInFrames:r})},t),flip:({durationInFrames:r,id:t})=>o.jsx(w.Transition,{presentation:ee(),timing:$({durationInFrames:r})},t),clockWipe:({width:r,height:t,durationInFrames:e,id:n})=>o.jsx(w.Transition,{presentation:te({width:r,height:t}),timing:$({durationInFrames:e})},n),star:({width:r,height:t,durationInFrames:e,id:n})=>o.jsx(w.Transition,{presentation:G({width:r,height:t}),timing:$({durationInFrames:e})},n),circle:({width:r,height:t,durationInFrames:e,id:n})=>o.jsx(w.Transition,{presentation:J({width:r,height:t}),timing:$({durationInFrames:e})},n),rectangle:({width:r,height:t,durationInFrames:e,id:n})=>o.jsx(w.Transition,{presentation:K({width:r,height:t}),timing:$({durationInFrames:e})},n),slidingDoors:({width:r,height:t,durationInFrames:e,id:n})=>o.jsx(w.Transition,{presentation:Q({width:r,height:t}),timing:$({durationInFrames:e})},n)};f.TransitionSeries=w,f.Transitions=Xe,f.circle=J,f.circleReveal=Ee,f.clockWipe=te,f.fade=O,f.flip=ee,f.linearTiming=$,f.rectangle=K,f.slide=Z,f.slidingDoors=Q,f.springTiming=ie,f.star=G,f.useTransitionProgress=Te,f.wipe=R,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});
|
|
5
5
|
//# sourceMappingURL=index.umd.js.map
|