Duration

The duration of animation at OVO is carefully calibrated to balance responsiveness with meaningful feedback. Like smart energy usage, our animation durations are optimised for the context.

Quick: 200ms

• Used for micro interactions such as buttons states, toggles, and form field responses.
• Creates quick visual feedback without delay.

Standard: 300ms

• Used for common UI transitions like panel expansions, notifications and accordions.
• Balances perceptibility with efficiency.

Expressive: 500ms

• Applied to significant moments that require user attention, such as page transitions, modal entries, and data visualisation sequences.
• Allows meaningful motion storytelling.

Expressive Plus: 700ms

• Reserved exclusively for complex, multi-stage animations like onboarding sequences, celebratory moments, and elaborate data visualisations.
• Use sparingly to highlight significant moments in the customer journey.

If working in After Effects when creating new motion component patterns, you’ll need to consider that After Effects uses a frame based system. The table below illustrates how our duration range translates to frames based on a 60fps timeline.