concurrent-safe-animation_skill

Overview

This skill implements animation systems that remain correct and smooth when rendering is concurrent or updates are interrupted. It focuses on preventing re-entrancy glitches, keeping timeline coordination with render commits, and stabilizing layout measurements during transitions. The result is predictable, testable animations in environments like React 18 or any concurrent renderer.

How this skill works

The skill instruments animation timelines to observe render commit boundaries and to defer or resume animation steps when renders are interrupted. It uses stable measurement snapshots and idempotent update scheduling to avoid layout thrash and re-entrancy bugs. It also provides test harnesses to simulate rapid state changes and verify continuity across interrupted renders.

When to use it

• High-interaction UIs where state updates can preempt running animations
• Applications using concurrent rendering (React 18+, concurrent frameworks)
• Complex transitions that depend on accurate layout measurements
• Cases where animation glitches would harm usability or legal/premium UX expectations

Best practices

• Take layout snapshots before starting a transition and reuse them until commit to avoid measurement drift
• Schedule animation steps relative to render commit points, not just requestAnimationFrame
• Make animation state updates idempotent so interrupted runs can safely restart
• Provide deterministic tests that simulate interrupted renders and rapid state flips
• Limit animation fidelity when throughput is critical; prefer visually stable transitions over perfect frame-by-frame fidelity

Example use cases

• Animating list reordering while items are added or removed in rapid succession
• Coordinating complex modal open/close sequences that may be interrupted by navigation
• Smooth property transitions for dashboard widgets under frequent live updates
• Ensuring banner or toast animations never leave the UI in a partially-applied state after hot reload or state rollback