Technical Constraints

When your animation works beautifully in Chrome but breaks in Safari or tanks performance on mobile, this walks you through the tradeoffs. It maps animation principles like timing and secondary action to technical realities: use CSS keyframes instead of expensive JavaScript calculations, simplify SVG paths when rendering chokes, cut secondary animations first when you're over budget. The feature detection patterns and progressive enhancement approach are solid. What's useful here is the troubleshooting checklist that forces you to test on the oldest supported browser and measure bundle impact before you ship. It won't make platform limitations disappear, but it gives you a systematic way to preserve animation intent while staying within constraints.

Install to Claude Code

npx -y skills add dylantarre/animation-principles --skill technical-constraints --agent claude-code