Physics-based animation library combining React Spring (spring dynamics, gesture integration, 60fps animations) and Popmotion (low-level composable animation utilities, reactive streams). Use when building fluid, natural-feeling UI animations, gesture-driven interfaces, physics simulations, or sprin

React Spring Physics Physics based animation for React applications combining React Spring's declarative spring animations with Popmotion's low level physics utilities. Overview React Spring provides spring physics animations that feel natural and interruptible. Unlike duration based animations, springs calculate motion based on physical properties (mass, tension, friction), resulting in organic, realistic movement. Popmotion complements this with composable animation functions for keyframes, decay, and inertia. When to use this skill: Natural, physics based UI animations Gesture driven interfaces (drag, swipe, scroll) Interruptible animations that respond to user input mid motion Smooth transitions that maintain velocity across state changes Momentum scrolling and inertia effects Core libraries: @react spring/web React hooks for spring animations @react spring/three Three.js integration popmotion Low level animation utilities (optional, for advanced use cases) Core Concepts Spring Physics Springs animate values from current state to target state using physical simulation: useSpring Hook Patterns Two initialization patterns for different use cases: Spring Configuration Presets React Spring provides built in config presets: Common Patterns 1. Click Triggered Spring Animation 2. Multi Element Trail Animation 3. List Transitions (Enter/Exit) 4. Scroll Based Spring Animation 5. Viewport Intersection Animation 6. Chained Async Animations 7. Spring with Velocity Preservation Integration Patterns With React Three Fiber (3D) With Popmotion (Low Level Physics) With Forms and Validation Performance Optimization On Demand Rendering Batch Multiple Springs Skip Animation (Testing/Accessibility) Common Pitfalls 1. Forgetting Dependencies Array 2. Mutating Spring Values 3. Ignoring Config Precision 4. Not Handling Velocity 5. Mixing Config Patterns 6. Animating Non Numerical Values Resources Scripts spring generator.py Generate React Spring boilerplate code physics calculator.py Calculate optimal spring physics parameters References react spring api.md Complete React Spring hooks and API reference popmotion api.md Popmotion functions and reactive streams physics guide.md Spring physics deep dive with tuning guide Assets starter spring/ React + Vite template with React Spring examples examples/ Real world patterns (gestures, scroll, 3D integration) Related Skills motion framer Alternative declarative animation approach with variants gsap scrolltrigger Timeline based animations for complex sequences react three fiber 3D scene management (use @react spring/three for animations) animated component libraries Pre built animated components using Motion Physics vs Timeline : Use React Spring for natural, physics based motion that responds to user input. Use GSAP for precise, timeline based choreography and complex multi step sequences.

react-spring-physics