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

technical-constraints