Easing

Easing defines how elements move over time, giving motion its character and feel. OVO Energy’s motion system uses easing curves derived directly from our logo letterforms, creating a motion signature that’s uniquely ours.

O Curve Easing

Inspired by the circular, fluid nature of our “O” letterform, these easing curves feature smooth, balanced movement with a natural feel. They’re perfect for standard interactions.

 

O Standard - cubic-bezier (0.33, 0.00, 0.67, 1.00)

O standard follows the arc of our letterform.
Creates a smooth, balanced transition with equal acceleration and deceleration.

 

O Enter - cubic-bezier (0.17, 0.67, 0.83, 1.00)

Reflects the entry point of our “O” letterform

 

O Exit - cubic-bezier (0.33, 0.00, 0.83, 0.33)

Reflects the exit path of our “O” letterform
Creates emphasis at the beginning with a quick finish

 

V Curve Easing

Based on the angular, directional nature of our “V” letterform, these easing curves feature more dramatic changes in momentum. This makes them ideal for larger, more purposeful transitions, that deserve focus and guides users attention, such as modals, bottom sheets and page swipes

 

V Standard - cubic-bezier (0.33, 0.00, 0.10, 1.00)

Traces the balanced angle of out “V” letterform

Creates a more balanced movement with a definitive direction.

 

 

V Sharp - cubic-bezier (0.40, 0.00, 0.75, 0.35)

Captures the sharp angle at the bottom of our “V” letterform

Features a pronounced change in direction that draws attention

 

V Power - cubic-bezier (0.05, 0.45, 0.25, 1.00)

When these ease patterns are used consistently across our digital products, we create a motion system that feels distinctly OVO while supporting our users task efficiently.