web3d-integration-patterns

Register ScrollTrigger with GSAP, then animate Three.js object properties like camera.position or mesh.rotation inside gsap.to() calls with a scrollTrigger config using scrub. Initialize the Three.js scene separately and pass its references to the animation setup function.

Use React Three Fiber for React-first applications needing declarative components, unified state management, and reusability. Use plain Three.js with GSAP for marketing pages with heavy scroll orchestration or high-performance particle systems requiring imperative control.

Yes, but avoid animating the same property with both libraries simultaneously, as this causes conflicts. Assign each library distinct properties, for example GSAP handles position while React Spring handles scale, or coordinate their timing explicitly.

Use Zustand for global state shared between the 3D scene and UI, storing selections, camera modes, and object references. Update both the Three.js object and the store together, and subscribe components to store slices to trigger GSAP animations on state changes.

Memory leaks occur when GSAP tweens or timelines are not killed on component unmount. Always store the tween reference and call tween.kill() or tl.kill() inside the useEffect cleanup function to dispose of running animations.

Use on-demand rendering with frameloop="demand" in React Three Fiber and call invalidate() only when state changes. For imperative setups, coordinate a single render loop with a needsRender flag triggered by ScrollTrigger updates instead of rendering every frame.