Jeroen Reumkens PRO
Preview
import { useAnimate, stagger } from "motion/react";
import { useEffect, useState, useRef } from "react";
export const App = () => {
const [scope, animate] = useAnimate();
const [count, setCount] = useState(0);
const animation = useRef(null);
useEffect(() => {
animation.current = animate(
".thingy",
{
y: [0, "50%", "50%", 0, 0]
},
{ repeat: Infinity, duration: 2.5, delay: stagger(-1.25) },
);
}, []);
return (
<div className="grid min-h-dvh place-items-center" ref={scope}>
<div className="grid [&_*]:[grid-area:1/1] place-items-center">
<div className="thingy w-36 h-36 border-2 border-white rounded-full origin-center"/>
<div className="thingy w-36 h-36 bg-white rounded-full origin-center"/>
</div>
<div className="flex gap-8">
<button
className="rounded-md bg-white px-4 py-2 text-black"
onClick={() => animation.current?.play()}
>
Play
</button>
<button
className="rounded-md bg-white px-4 py-2 text-black"
onClick={() => animation.current?.pause()}
>
Stop
</button>
</div>
</div>
);
};
export default App;