Loading and Transition Animation Spec
Produce a precise, production-ready specification for UI animations and transitions that enhance usability, maintain performance, and align with the…
- Category
- Design & UX
- Output
- Markdown
- Fields
- 2
- design-review
- ux-critique
- documentation
- step-by-step
- accessibility
- visual-ideation
Prompt
You are an expert UI/UX motion designer and interaction specialist. Your task is to produce a precise, production-ready specification for UI animations and transitions that enhance usability, maintain performance, and align with the product's emotional tone.
Using the provided context, deliver a structured motion spec covering the following six areas:
1. **Scope of Motion:** Clearly identify which UI elements should animate and explicitly list what should remain static to prevent cognitive overload.
2. **Duration & Easing:** Provide specific duration ranges (in milliseconds) and recommended easing curves or functions for each interaction state.
3. **Loading States:** Recommend the optimal loading indicator (e.g., skeleton screen, spinner, progress bar, or none) based on expected wait times, with clear rules for when to use each.
4. **Enter/Exit Transitions:** Describe the directional flow and spatial relationships (e.g., "originates from trigger element, slides in from top") to support user mental mapping.
5. **Performance & Accessibility:** Specify reduced-motion fallbacks, GPU-accelerated properties to prioritize or avoid, and target frame rates.
6. **Motion Philosophy:** Define the boundary between functional/delightful motion and distracting decoration, providing concrete examples of what crosses that line.
**Constraints & Guidelines:**
- Base all recommendations strictly on the provided interaction and product feel. Do not invent platform-specific APIs, hardware constraints, or third-party libraries.
- If critical details are missing or ambiguous (e.g., exact expected load times, specific device constraints), list them in a brief "Open questions" section at the end instead of guessing.
- Keep the tone professional, actionable, and ready for handoff to developers and designers.
- Structure your response using the exact headings below.
**Context:**
- Interaction: Interaction type
- Product feel: Product feel (if not provided, assume a balanced, professional tone)
**Output Structure:**
### 1. Scope of Motion
[Content]
### 2. Duration & Easing
[Content]
### 3. Loading States
[Content]
### 4. Enter/Exit Transitions
[Content]
### 5. Performance & Accessibility
[Content]
### 6. Motion Philosophy
[Content]
### Open Questions (if any)
[Content]
How to use this prompt
- Fill in the fields above. Required ones are marked with *.
- Check the prompt preview: your answers appear highlighted in place.
- Select Copy prompt and paste it into ChatGPT, Claude, Gemini or any AI assistant.
More Design & UX prompts
- Heuristic UX CritiqueROLE: You are a senior UX designer conducting a rigorous heuristic evaluation.
- Dashboard and Data Viz LayoutTranslate raw metrics into a high-impact dashboard layout that supports specific business decisions and helps the target audience answer critical questions…
- Design Critique Get Feedback on My DesignAnalyze a text description of a design and deliver a structured critique.
- Information Architecture and SitemapDesign a user-centric information architecture and sitemap based on the provided details.
- Pricing Table DesignDesign a clear, psychologically optimized pricing table layout and copy strategy that guides visitors toward the right plan without causing decision fatigue.
- Design Handoff Notes for DevsWrite comprehensive design specification notes for component or screen that minimize developer questions and ensure accurate implementation.