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.

skills.sh installs: 532
GitHub stars: 146
last updated: Aug 21, 2026

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

Technical Constraints

Work within platform limitations while preserving animation intent.

Problem Indicators

Animation doesn't work on target browsers
Mobile devices can't handle animation
Framework limitations block implementation
File size constraints (Lottie, sprites)
Email/constrained environment needs

Diagnosis by Principle

Straight Ahead vs Pose-to-Pose

Issue: Runtime calculations too expensive Fix: Pre-calculate animations. Use CSS keyframes (pose-to-pose) over JS frame-by-frame (straight ahead).

Solid Drawing

Issue: Complex shapes cause rendering issues Fix: Simplify geometry. Use CSS shapes over SVG paths. Reduce polygon counts in 3D.

Timing

Issue: Consistent timing across devices Fix: Use relative units. Test on slowest target device. Consider requestAnimationFrame for JS.

Secondary Action

Issue: Budget only allows essential animation Fix: Prioritize primary actions. Cut secondary animations first when constrained.

Staging

Issue: Limited screen real estate Fix: Animate in place. Use transforms that don't affect layout. Consider reduce-motion as default on constrained platforms.

SKILL.md on GitHub