47 lines
1.3 KiB
React
47 lines
1.3 KiB
React
/**
|
|
* Minimal GSAP React example — follows gsap-react skill: useGSAP, scope, cleanup.
|
|
* No selector without scope; refs for targets; automatic revert on unmount.
|
|
*/
|
|
import { useRef } from "react";
|
|
import { useGSAP } from "@gsap/react";
|
|
import { gsap } from "gsap";
|
|
|
|
// Register useGSAP once (could be in main.jsx for app-level)
|
|
gsap.registerPlugin(useGSAP);
|
|
|
|
function App() {
|
|
const containerRef = useRef(null);
|
|
const boxRef = useRef(null);
|
|
|
|
useGSAP(
|
|
() => {
|
|
// Scoped to containerRef — selectors only match inside container
|
|
gsap.to(boxRef.current, { x: 100, duration: 0.6, ease: "power2" });
|
|
gsap.from(".item", { autoAlpha: 0, y: 20, stagger: 0.1 });
|
|
},
|
|
{ scope: containerRef }
|
|
);
|
|
|
|
return (
|
|
<div ref={containerRef} style={{ padding: "2rem" }}>
|
|
<h1>GSAP React — useGSAP + scope + cleanup</h1>
|
|
<div
|
|
ref={boxRef}
|
|
className="box"
|
|
style={{
|
|
width: 80,
|
|
height: 80,
|
|
background: "#0fa",
|
|
borderRadius: 8,
|
|
marginBottom: "1rem",
|
|
}}
|
|
/>
|
|
<div className="item" style={{ margin: "0.5rem 0" }}>Item 1</div>
|
|
<div className="item" style={{ margin: "0.5rem 0" }}>Item 2</div>
|
|
<div className="item" style={{ margin: "0.5rem 0" }}>Item 3</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|