TemplateFREE⏱️ 2-4 hours
Motion Design Template for Product Managers
A motion and animation guidelines template for design systems. Covers duration scales, easing curves, transition types, entrance/exit patterns, reduced...
Updated 2026-03-05
Motion Design
| # | Item | Category | Priority | Owner | Status | Notes | |
|---|---|---|---|---|---|---|---|
| 1 | |||||||
| 2 | |||||||
| 3 | |||||||
| 4 | |||||||
| 5 |
#1
#2
#3
#4
#5
Edit the values above to try it with your own data. Your changes are saved locally.
Get this template
Choose your preferred format. Google Sheets and Notion are free, no account needed.
Frequently Asked Questions
How do I know if an animation is too slow?+
If the user has to wait for the animation to finish before they can interact with the next element, it is too slow. The test: does the animation feel like it is enhancing the experience, or does it feel like it is in the way? Modal entrances at 300ms feel intentional. Modal entrances at 800ms feel like the product is wasting the user's time. When in doubt, make it faster.
Should every state change be animated?+
No. Animate transitions where the animation serves a purpose: guiding attention, showing spatial relationships, or providing feedback. Do not animate for the sake of animating. A checkbox changing color does not need a 300ms transition. An icon swapping from outline to filled does not need a crossfade. Instant state changes are fine for small, localized interactions.
How do I handle animation in emails and static contexts?+
Do not use animation in emails (most clients strip it). For print stylesheets, disable all animations. For social media previews (OG images), use static screenshots. Animation is a web/app concern only. The [design QA template](/templates/design-qa-template) includes a checklist item for verifying animations render correctly across contexts.
What about CSS `animation` vs. `transition`?+
Use `transition` for state changes (hover, focus, open/close). Use `animation` for continuous or complex multi-step sequences (loading spinners, onboarding highlights, skeleton shimmers). Transitions are simpler, perform better, and are easier to override with `prefers-reduced-motion`. Default to `transition` unless you need keyframes.
How do I test animations on slow devices?+
Chrome DevTools has a CPU throttling option (Performance tab, gear icon, CPU: 4x slowdown). This simulates a mid-range Android device. Test every animation at 4x CPU slowdown. If it drops below 30fps, the animation needs optimization: switch to `transform`/`opacity` only, reduce complexity, or increase the `will-change` hint. Real device testing on a Pixel 4a or equivalent is the gold standard. ---
Explore More Templates
Browse our full library of PM templates, or generate a custom version with AI.