forge-motion

Cinematic motion in AI-generated frontends should communicate state changes rather than decoration. You can orchestrate scroll-driven storytelling and physics-based interactions using GSAP and Framer Motion patterns to ensure purposeful transitions.

Spring physics for magnetic buttons requires configuring mass, drag, and spring properties within your animation library. Use Framer Motion or GSAP to define spring-based physics configurations that drive interactive components naturally.

GSAP and Framer Motion work together for scroll-driven storytelling and cinematic page transitions. You can choreograph sequences consistently across both libraries while maintaining proper ScrollTrigger hygiene and cleanup patterns.

Animation cleanup in WebGL canvases requires calling ctx.revert() and maintaining ScrollTrigger hygiene. Respect prefers-reduced-motion by enforcing reduced motion compliance so animation contexts are properly removed when unmounting components.

Building 3D canvas interactions with Three.js and Framer Motion involves orchestrating WebGL canvases with physics-based interactions. Use consistent animation patterns to ensure proper cleanup and state communication across 3D elements.

Physics-based motion should not be used when users have prefers-reduced-motion enabled, as accessibility compliance is mandatory. Avoid decorative animations that do not communicate state changes, focusing instead on purposeful cinematic transitions.