React Integration

The LLL Animation Workshop uses Vite + React TypeScript. GSAP and Three.js both work with React, but require specific integration patterns to avoid bugs.

Why React Changes Things

React manages the DOM — components render JSX which React turns into real DOM elements. This creates two challenges for animation libraries:

1. Timing: At the time a component function runs, the DOM elements it describes may not exist yet. GSAP cannot target elements that don't exist.
2. Refs, not queries: document.querySelector('.cube') is fragile in React. Use useRef to get a stable reference to the specific element in your component instance.
3. Cleanup: If a component unmounts (during hot module replacement, strict mode double-render, or navigation), any running tweens or render loops must be killed to prevent memory leaks.

The fix for all three: use useRef to get a stable reference to the DOM element, and useEffect to run animation code after the DOM is ready.

GSAP + React (Phase 1)

Setting Up the Ref