UI & interface design

UI Animation & Transition Specifications Generator

Create comprehensive animation and transition specifications for user interfaces that balance aesthetic appeal with usability. This prompt helps designers and developers establish consistent motion design guidelines including timing, easing curves, and behavior patterns for optimal user experience.

5 blanks to fill in · Added December 2024 · ui-design · animation · transitions · motion-design · user-experience

The prompt

5 blanks

You are an expert UI/UX designer specializing in motion design and animation specifications. Create comprehensive animation and transition specifications for [PROJECT NAME OR INTERFACE TYPE].

Project Context:
- Platform: [WEB/MOBILE APP/DESKTOP/CROSS-PLATFORM]
- Design System: [MATERIAL DESIGN/FLUENT/CUSTOM/OTHER]
- Target Audience: [USER DEMOGRAPHIC AND TECHNICAL PROFICIENCY]
- Performance Constraints: [DEVICE CAPABILITIES, BANDWIDTH CONSIDERATIONS]

Generate detailed specifications covering:

1. **Duration Standards**
   - Micro-interactions (buttons, toggles, hovers)
   - Medium transitions (modals, dropdowns, notifications)
   - Large transitions (page changes, screen transitions)
   - Loading states and progress indicators

2. **Easing Functions**
   - Entry animations (elements appearing)
   - Exit animations (elements disappearing)
   - Emphasis animations (drawing attention)
   - Interactive feedback animations

3. **Animation Behaviors**
   - Fade specifications (opacity transitions)
   - Scale transformations (size changes)
   - Movement patterns (directional motion)
   - Combined animations (multi-property transitions)

4. **Implementation Guidelines**
   - CSS/JavaScript specifications
   - Accessibility considerations (prefers-reduced-motion)
   - Performance optimization techniques
   - Fallback behaviors for low-performance devices

5. **Use Cases and Examples**
   - Navigation transitions
   - Form feedback animations
   - Content loading patterns
   - Error and success states
   - Contextual overlays and modals

For each specification, provide:
- Exact timing values in milliseconds
- Easing curve specifications (cubic-bezier values or named curves)
- Properties being animated
- Rationale for the chosen approach
- Code snippets or pseudo-code where applicable

Ensure all specifications prioritize user experience, maintain consistency across the interface, and follow accessibility best practices.

Open in ChatGPT

Blanks: Project name or interface type · Web/mobile app/desktop/cross platform · Material design/fluent/custom/other · User demographic and technical proficiency · Device capabilities, bandwidth considerations

How to use it

This prompt helps you create a complete animation specification document for your UI project. Fill in the bracketed placeholders with your specific project details to receive tailored timing, easing, and implementation guidelines that align with industry best practices while meeting your unique requirements.

Tips

Start with conservative timing values between 200-300ms and adjust based on user testing rather than beginning with flashy, long animations
Use transform and opacity properties for animations instead of positional or dimensional properties to ensure smooth 60fps performance
Maintain consistent timing for similar interaction types across your interface to build user confidence and predictability
Test animations on actual target devices, not just high-end development machines, to ensure performance meets real-world conditions
Document your easing curves and timing values in your design system for easy reference and consistent implementation across teams
Consider the cumulative effect of multiple sequential animations - they should complement each other without creating visual overload or excessive delays

Project Context Requirements

Provide detailed information about your platform and constraints. Web animations typically run 150-200ms while mobile apps use 200-400ms durations. Specify any design system you're following (Material Design, Fluent, custom) as this influences timing standards. Include performance constraints like target devices and network conditions to ensure animations remain smooth across all user scenarios.

Animation Hierarchy Structure

Organize animations by size and complexity. Micro-interactions (100-200ms) provide immediate feedback for buttons and toggles. Medium transitions (200-400ms) handle modals and dropdowns. Large transitions (300-500ms) manage page changes and full-screen elements. Establishing this hierarchy ensures consistent pacing throughout your interface and helps users build predictable mental models.

Easing and Motion Quality

Different animation types require different easing curves. Use ease-out for entering elements (quick start, gradual stop), ease-in for exiting elements (gradual start, quick stop), and ease-in-out for moving elements. Specify cubic-bezier values for custom curves that match your brand's personality while maintaining natural motion physics.

Accessibility and Performance

Always implement prefers-reduced-motion media queries to respect user preferences. Consider users with vestibular disorders who may experience discomfort from excessive motion. Optimize animations by using transform and opacity properties which perform better than animating layout properties. Provide clear fallback states for devices that cannot support smooth animations.