(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[33415],{33415:(s,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>k});var c=n(87687),r=n(52751),l=n(31928),a=n(53740),t=n(30251),i=n(99460),o=n(42591),d=n(42558);let p=(0,l.I)(o.Ay)({name:"Wrapper",class:"weuwhgo",propsAsIs:!0}),b=(0,l.I)("div")({name:"ContentOuterWrapper",class:"cqd47wt",propsAsIs:!1}),g=(0,l.I)("div")({name:"ContentWrapper",class:"c1yc0wlg",propsAsIs:!1}),x=(0,l.I)("div")({name:"Label",class:"l16tgb2g",propsAsIs:!1}),u=(0,l.I)("div")({name:"BoxWrapper",class:"b1ld8tcn",propsAsIs:!1}),I=(0,l.I)(t.CS.div)({name:"RSBox",class:"r1fc0mb5",propsAsIs:!0}),h=(0,l.I)("div")({name:"CssBox",class:"cldk6rb",propsAsIs:!1}),m=(0,l.I)("div")({name:"BackgroundBox",class:"b1s2bgk5",propsAsIs:!1}),j=(0,l.I)(m)({name:"BackgroundBoxLeft",class:"blc25ia",propsAsIs:!0}),f=(0,l.I)(m)({name:"BackgroundBoxRight",class:"b1y3pmwg",propsAsIs:!0}),w=(0,l.I)(d.A)({name:"Button",class:"b1njyruy",propsAsIs:!0}),A=(0,l.I)("div")({name:"Footer",class:"f152venn",propsAsIs:!1}),k=function(s){let{boxes:e}=s,[n,l]=r.useState("left"),o=r.useRef(null),d=(0,i.A)(o),m=(null==d?void 0:d.width)?d.width-55-12:0,k="left"===n?0:m,y="translateX(".concat(k,"px)"),v=(0,t.zh)({to:{x:k},config:{tension:100,friction:10,mass:1,precision:1e-4}});return(0,c.jsxs)(p,{colorMode:"dark","data-can-be-annotated":!1,children:[(0,c.jsx)(b,{children:(0,c.jsxs)(g,{ref:o,children:[e.includes("css")&&(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(x,{children:["Using ",(0,c.jsx)("em",{children:"linear()"}),":"]}),(0,c.jsxs)(u,{children:[(0,c.jsx)(j,{}),(0,c.jsx)(f,{}),(0,c.jsx)(h,{style:{transform:y}})]})]}),e.includes("rs")&&(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(x,{children:["Using ",(0,c.jsx)("em",{children:"React Spring"}),":"]}),(0,c.jsxs)(u,{children:[(0,c.jsx)(j,{}),(0,c.jsx)(f,{}),(0,c.jsx)(I,{style:v})]})]})]})}),(0,c.jsx)(A,{children:(0,c.jsx)(w,{Icon:a.A,onClick:()=>l("left"===n?"right":"left"),children:"Run Animation"})})]})};n(45195)},45195:s=>{s.exports={weuwhgo:"weuwhgo",cqd47wt:"cqd47wt",c1yc0wlg:"c1yc0wlg",l16tgb2g:"l16tgb2g",b1ld8tcn:"b1ld8tcn",r1fc0mb5:"r1fc0mb5",cldk6rb:"cldk6rb",b1s2bgk5:"b1s2bgk5",blc25ia:"blc25ia",b1y3pmwg:"b1y3pmwg",b1njyruy:"b1njyruy",f152venn:"f152venn"}}}]);
//# sourceMappingURL=33415.8c730c6b43aa2060.js.map