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
- Use CSS over JavaScript - Better browser optimization
- Progressive enhancement - Core function works without animation
- Feature detection - Check capability before animating
- Fallback states - Static alternative for unsupported browsers
- 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
// 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-motionas proxy