home / skills / dylantarre / animation-principles / technical-constraints

technical-constraints skill

safe

/skills/12-by-problem-type/technical-constraints

This skill helps you implement animation within platform constraints by selecting techniques and fallbacks that preserve intent across devices.

npx playbooks add skill dylantarre/animation-principles --skill technical-constraints

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

2.6 KB

---
name: technical-constraints
description: Use when animation is limited by browser support, platform capabilities, or technical requirements
---

# 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.

## Quick Fixes

1. **Use CSS over JavaScript** - Better browser optimization
2. **Progressive enhancement** - Core function works without animation
3. **Feature detection** - Check capability before animating
4. **Fallback states** - Static alternative for unsupported browsers
5. **Lazy load animation libraries** - Don't block initial render

## Troubleshooting Checklist

- [ ] List target browsers/devices
- [ ] Check caniuse.com for feature support
- [ ] Test on oldest supported browser
- [ ] Measure animation impact on bundle size
- [ ] Verify fallback experience is acceptable
- [ ] Test with animation disabled
- [ ] Check framework animation capabilities
- [ ] Consider server-rendered alternatives (GIF, video)

## Code Pattern

```js
// Feature detection
const supportsAnimation =
  'animate' in Element.prototype &&
  CSS.supports('transform', 'translateZ(0)');

if (supportsAnimation) {
  element.animate(keyframes, options);
} else {
  element.classList.add('final-state');
}

// Progressive enhancement
@supports (animation: name) {
  .element {
    animation: fadeIn 200ms ease-out;
  }
}
```

## Platform-Specific Tips

- **Email**: Use GIF or static images
- **iOS Safari**: Test `-webkit-` prefixes
- **Older Android**: Reduce animation complexity
- **Low-end devices**: Use `prefers-reduced-motion` as proxy

Overview

This skill helps designers and developers adapt animations to browser, device, and platform constraints while preserving the original animation intent. It focuses on diagnosing performance and compatibility issues, offering progressive-enhancement strategies and practical fallbacks. Use it to make animations reliable across targets without bloating bundles or breaking UX.

How this skill works

The skill inspects target platform capabilities, identifies expensive runtime patterns, and recommends lower-cost alternatives such as CSS keyframes, precomputed poses, or static fallbacks. It provides a checklist for testing and verification, sample feature-detection code, and prioritized fixes (e.g., cut secondary motion first). Platform-specific guidance (email, iOS Safari, low-end Android) is included to tailor solutions.

When to use it

Animation fails or stutters on target browsers or devices
You must meet strict file-size or bundle constraints (Lottie, sprites)
Working inside constrained environments like email or server-rendered pages
Framework or runtime lacks advanced animation APIs
You need to support low-end hardware or prefers-reduced-motion users

Best practices

Prefer CSS keyframes and transforms over JS frame-by-frame to leverage browser optimizations
Precompute or use pose-to-pose approaches when runtime calculations are expensive
Progressive enhancement: core functionality must work without animation
Use feature detection and provide clear static or simplified fallbacks
Prioritize primary actions; remove or simplify secondary animations under budget

Example use cases

Port a hero animation to email by replacing it with GIF or static visuals
Convert JS-driven particle effects to CSS transforms or pre-baked sprites for low-end devices
Assess a SPA and lazy-load animation libraries so initial render remains fast
Audit an app for accessibility and use prefers-reduced-motion to provide reduced alternatives
Simplify 3D or SVG geometry to prevent rendering issues on older browsers

FAQ

How do I decide between CSS and JS animations?

Choose CSS for composited transforms and simple timing where possible; use JS when you need dynamic state-based control or physics, but offload heavy work by precomputing frames or using requestAnimationFrame.

What's the fastest way to diagnose an animation problem?

Start with a checklist: target browsers/devices, feature support (caniuse), test on the slowest device, and disable animations to compare layout/UX. Use browser devtools to profile paint and composite times.

How should I handle email and other highly constrained platforms?

Assume limited support: use GIFs, optimized videos, or static images. Keep file size small and ensure the message remains clear without motion.