(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6627],{43256:(s,e,t)=>{"use strict";t.d(e,{A:()=>l});let l=(0,t(31928).I)("button")({name:"DefaultButton",class:"dj4vswd",propsAsIs:!1});t(25551)},6627:(s,e,t)=>{"use strict";t.r(e),t.d(e,{default:()=>x});var l=t(87687),a=t(52751),c=t(31928),n=t(30251),i=t(16866),r=t(43256);let d=(0,c.I)("div")({name:"Wrapper",class:"w131x29k",propsAsIs:!1}),p=(0,c.I)("div")({name:"Track",class:"t1hfkbc4",propsAsIs:!1}),o=(0,c.I)("div")({name:"Ball",class:"b1e2i24g",propsAsIs:!1}),h=(0,c.I)(o)({name:"CssBall",class:"c1w1tl4l",propsAsIs:!0});(0,c.I)("img")({name:"BallImg",class:"bf0qt3z",propsAsIs:!1});let x=()=>{let[s,e]=a.useState(0),t="translateX(".concat(s?325*s-75:0,"px)"),c=(0,n.zh)({transform:t,config:{mass:2,tension:100,friction:26}});return(0,l.jsx)(i.A,{delay:500,duration:750,children:(0,l.jsxs)(d,{style:{width:325,height:280},children:[(0,l.jsx)(p,{children:(0,l.jsx)(h,{style:{transform:t}})}),(0,l.jsx)(p,{children:(0,l.jsx)(o,{as:n.CS.div,style:c})}),(0,l.jsx)(r.A,{onClick:()=>e(Math.abs(1-s)),children:"Toggle Animation"})]})})};t(78785)},25551:s=>{s.exports={dj4vswd:"dj4vswd"}},78785:s=>{s.exports={w131x29k:"w131x29k",t1hfkbc4:"t1hfkbc4",b1e2i24g:"b1e2i24g",c1w1tl4l:"c1w1tl4l"}}}]);
//# sourceMappingURL=6627.60d6676e617727e7.js.map