Motion

UI Interactions

Micro Interactions

Micro interactions are small, subtle animations that provide feedback and guidance throughout OVO’s digital experience. These refined details enhance usability without drawing unnecessary attention.

Buttons and Controls

Our interactive elements respond to users input with subtle immediate feedback.

Hover States: Elements gently highlight when a user hovers,

Motion Specification
Element	Property	Value start	Value end	Duration	Ease	Event
Card	Scale	100%	110%	300ms	O-Standard (0.33, 0.00, 0.67, 1.00)	Hover

Active States: When pressed, elements respond with a slight depression effect

Motion Specification
Element	Property	Value start	Value end	Duration	Ease	Event
Button	Scale	100%	95%	200ms	O-Standard (0.33, 0.00, 0.67, 1.00)	Click

Toggle Switches: Our energy-saving toggles transition between states with a 200ms animation using O-Standard easing.

Motion Specification
Element	Property	Value start	Value end	Duration	Ease	Event
Toggle switch	Position	(X) -10	(X) 10	200ms	O-Standard (0.33, 0.00, 0.67, 1.00)	Click
Toggle Background	Colour	#635E58	#1F3BCD	200ms	O-Standard (0.33, 0.00, 0.67, 1.00)	Click

Transitions

Transitions are used to move between screens, they guide users through their journey with clarity and purpose. Our transitions should always feel natural and seamless.

Entry and exit

Elements enter and exit the interface in ways that reinforce the relationship between screens and states.

Motion Specification
Element	Property	Value start	Value end	Duration	Ease	Event
Bottom Sheet	Position (Enter)	(Y) 406	(Y) 180	300ms	V-Power (0.05, 0.45, 0.25, 1.00)	Click
Bottom Sheet	Position (Exit)	(Y) 180	(Y) 406	300ms	V-Sharp (0.40, 0.00, 0.75, 0.35)	Click
Tint Layer	Opacity (Enter)	0%	75%	300ms	V-Power (0.05, 0.45, 0.25, 1.00)	Click
Tint Layer	Opacity (Exit)	75%	0%	300ms	V-Sharp (0.40, 0.00, 0.75, 0.35)	Click

Lateral movement

Side-to-side transitions between equal level screens maintain spatial relationships.

Motion Specification
Element	Property	Value start	Value end	Duration	Ease	Event
App Screen (Exit)	Position (Exit)	(X) 0	(X) -105	500ms	V-Standard (0.33, 0.00, 0.10, 1.00)	Click
Tint Layer (Exit)	Opacity (Exit)	0%	75%	500ms	V-Standard (0.33, 0.00, 0.10, 1.00)	Click
App Screen (Enter)	Position(Enter)	(X) 330	(X) 0	500ms	V-Standard (0.33, 0.00, 0.10, 1.00)	Click
Tint Layer (Enter)	Opacity (Exit)	75%	0%	300ms	V-Standard (0.33, 0.00, 0.10, 1.00)	Click

Component card - page transition

When pressed, card expands to fill the screen with new content

Motion Specification
Element	Property	Value start	Value end	Duration	Ease	Event
Component Card (Click)	Scale	100%	95%	500ms	V-Standard (0.33, 0.00, 0.10, 1.00)	Click
Component Card	Position	(Y) 230	(X) -105	500ms	V-Standard (0.33, 0.00, 0.10, 1.00)
Screen Elements (Exit)	Opacity	100%	0%	300ms	O-Standard 0.33, 0.00, 0.67, 1.00
Screen Elements (Enter)	Opacity (Exit)	0%	100%	300ms	V-Standard (0.33, 0.00, 0.10, 1.00)

Components

Quick Action Cards

When scrolled through, card expands to highlight selected action card

Skeleton Loader

Used to give users visual feedback of what content is loading

Version A (Opacity)	Version B (15° progress wipe)

Version A (Opacity with a 5 frame stagger)

Motion Specification
Element	Property	Value start	Value Mid	Value end	Duration	Ease	Event
Placeholder graphic	Opacity	100%	0%	100%	60f	O-Standard (0.33, 0.00, 0.67, 1.00)	Loading
Sequence	Opacity	0f	30f	60f

Version B

Motion Specification
Element	Property	Value start	Value end	Duration	Ease	Event
15° progress	Position	(X) -20	(X) 500	700ms	O-Standard (0.33, 0.00, 0.67, 1.00)	Loading

Data Visualisation

Motion in data visualisation reveals patterns and trends, by animating relationships over time.

Bar charts

Sequence: (The bars should animate in with a 4 frame stagger)

Motion Specification
Element	Property	Value start	Value end	Duration	Ease	Event
Bar 1	Position	(Y) 136	(Y) 18.5	300ms	V-Power (0.05, 0.45, 0.25, 1.00)	OnLoad
Bar 2	Position	(Y) 120	(Y) 2	300ms	V-Power (0.05, 0.45, 0.25, 1.00)	OnLoad
Bar 3	Position	(Y) 125	(Y) 7.5	300ms	V-Power (0.05, 0.45, 0.25, 1.00)	OnLoad
Bar 4	Position	(Y) 130	(Y) 12.5	300ms	V-Power (0.05, 0.45, 0.25, 1.00)	OnLoad
Bar 5	Position	(Y) 120	(Y) 0	300ms	V-Power (0.05, 0.45, 0.25, 1.00)	OnLoad
Bar 6	Position	(Y) 125	(Y) 7.5	300ms	V-Power (0.05, 0.45, 0.25, 1.00)	OnLoad
Bar 7	Position	(Y) 120	(Y) 2	300ms	V-Power (0.05, 0.45, 0.25, 1.00)	OnLoad

Ring chart

Progress indicators

Animations that show loading states and progress are designed to feel efficient and transparent.

Loading spinner v1

Motion Specification
Element	Property	Value start	Value mid	Value end	Duration	Ease	Event
Square	Rotation	(Y) 90°	(Y) +260°	(Y) 1x +90°	667ms	O-Standard (0.33, 0.00, 0.67, 1.00)	Loading

Loading spinner v2

Loader animates with a 10 frame stagger

Motion Specification
Element	Property	Value start	Value mid	Value end	Duration	Ease	Event
Square	Position	(Y) 0	(Y) -140	(Y) 0	700ms	O-Standard (0.33, 0.00, 0.67, 1.00)	Loading
Square	Rotate	15°	134°	194°	700ms	O-Standard (0.33, 0.00, 0.67, 1.00)	Loading

Toast

Use a toast to show updates about processes at the bottom of the screen without interrupting the user experience

Toast In

Motion Specification
Element	Property	Value start	Value end	Duration	Ease	Event
Toast object	Position	(Y) 148	(Y) -5.05	500ms	V-Power (0.05, 0.45, 0.25, 1.00)	Notification
Toast object	Opacity	0%	100%	500ms	V-Power (0.05, 0.45, 0.25, 1.00)	Notification

Toast Out

Motion Specification
Element	Property	Value start	Value end	Duration	Ease	Event
Toast object	Position	(Y) -5.05	(Y) 148	500ms	V-Sharp (0.40, 0.00, 0.75, 0.35)	Notification
Toast object	Opacity	100%	0%	500ms	V-Sharp (0.40, 0.00, 0.75, 0.35)	Notification

Expanding Containers

Elements that grow to reveal more content do so in a way that feels natural and expected.

Recommended Pairing

Transition Purpose	Easing	Duration	Category
Button / toggle state change	O-Standard (0.33, 0.00, 0.67, 1.00)	200ms	Quick
Element leaving screen	O-Exit (0.33, 0.00, 0.83, 0.33)	200ms	Quick
Element appearing on screen	O-Enter (0.17, 0.67, 0.83, 1.00)	200ms	Quick
Form field focus / validation	O-Standard (0.33, 0.00, 0.67, 1.00)	200ms	Quick
Error / confirmation message	V-Standard (0.33, 0.00, 0.10, 1.00)	300ms	Standard
Panel expansion	V-Power (0.05, 0.45, 0.25, 1.00)	300ms	Standard
Panel collapse	V-Sharp 0.40, 0.00, 0.75, 0.35	300ms	Standard
Dropdown menu	O-Enter (0.17, 0.67, 0.83, 1.00)	300ms	Standard
Page transitions	V-Standard (0.33, 0.00, 0.10, 1.00)	500ms	Expressive
Modals	V-Standard (0.33, 0.00, 0.10, 1.00)	500ms	Expressive
Data Visualisation build	V-Power (0.05, 0.45, 0.25, 1.00)	500ms	Expressive
Multi-step sequence	V-Standard (0.33, 0.00, 0.10, 1.00)	700ms	Expressive Plus
Celebratory animation	V-Power (0.05, 0.45, 0.25, 1.00)	700ms	Expressive Plus
Onboarding transitions	O-Standard (0.33, 0.00, 0.67, 1.00)	700ms	Expressive Pluis

Join the community

For the latest features, asking questions and seeing how people are using Element across OVO experiences, join our Slack channel.