(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[62062],{59769:(s,e,t)=>{"use strict";t.d(e,{Z:()=>l});let l=(0,t(64833).z)("button")({name:"DefaultButton",class:"dj4vswd",propsAsIs:!1});t(16368)},62062:(s,e,t)=>{"use strict";t.r(e),t.d(e,{default:()=>x});var l=t(67841),a=t(79477),c=t(64833),n=t(97718),i=t(28432),r=t(59769);let d=(0,c.z)("div")({name:"Wrapper",class:"w131x29k",propsAsIs:!1}),p=(0,c.z)("div")({name:"Track",class:"t1hfkbc4",propsAsIs:!1}),o=(0,c.z)("div")({name:"Ball",class:"b1e2i24g",propsAsIs:!1}),h=(0,c.z)(o)({name:"CssBall",class:"c1w1tl4l",propsAsIs:!0});(0,c.z)("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.q_)({transform:t,config:{mass:2,tension:100,friction:26}});return(0,l.jsx)(i.Z,{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.q.div,style:c})}),(0,l.jsx)(r.Z,{onClick:()=>e(Math.abs(1-s)),children:"Toggle Animation"})]})})};t(77920)},16368:s=>{s.exports={dj4vswd:"dj4vswd"}},77920:s=>{s.exports={w131x29k:"w131x29k",t1hfkbc4:"t1hfkbc4",b1e2i24g:"b1e2i24g",c1w1tl4l:"c1w1tl4l"}}}]);
//# sourceMappingURL=62062.00ce699c808facaa.js.map