1A: Microanimations for Digital Interfaces

Project Overview (Weeks 1-5)

Create three distinct micro-animations that enhance user experience in digital interfaces. These animations should demonstrate your understanding of motion design principles, user feedback, and interaction patterns. Your animations must be functional, purposeful, and ready to implement in interactive prototypes.

Deliverables

You must create three micro-animations from the following categories:

Required Animations (choose 3):

• Loading indicator (progress bar, spinner, or skeleton screen)
• Call-to-action button (hover, click, or press states)
• Form validation (success/error feedback)
• Navigation transition (menu open/close, tab switching)
• Data visualisation (chart appearance, number counter)
• Toggle switch or checkbox interaction
• Pull-to-refresh animation
• Notification or toast message appearance

Each animation should include multiple states and be between 0.5-3 seconds in duration.

Technical Requirements

• Tools: Figma, Lottie, or Keynote (choose one primary tool)
• Export formats: All animations must be prototype-ready
• Frame rate: Minimum 30fps for smooth playback
• Optimisation: Animations should be lightweight and performant