Jeroen Reumkens PRO
Preview
import { useAnimate, stagger } from "motion/react";
import { useEffect, useRef } from "react";
export const App = () => {
const [scope, animate] = useAnimate();
const animationRef = useRef(null);
useEffect(() => {
// Timeout is only here to show that even registering it later doesn't
// make it suddenly work. The animation should not be started if autoplay is false.
setTimeout(() => {
animationRef.current = animate(".fade-it", {
opacity: 0.5,
}, { autoplay: false });
}, 1000);
}, []);
const forwards = () => {
if (!animationRef.current) return;
animationRef.current.speed = 1;
animationRef.current.play();
};
const backwards = () => {
if (!animationRef.current) return;
animationRef.current.speed = -1;
animationRef.current.play();
};
return (
<div className="grid min-h-dvh place-items-center gap-8">
<div ref={scope}>
<div className="fade-it grid aspect-square place-items-center rounded-full bg-white p-4 opacity-0">
Have some fade in me.
</div>
<div className="mt-4 flex justify-center gap-2">
<button className="rounded-lg bg-white px-3 py-2" onClick={forwards}>
Run
</button>
<button className="rounded-lg bg-white px-3 py-2" onClick={backwards}>
Reverse
</button>
</div>
</div>
</div>
);
};
export default App;