Empowered → Elevated
By using motion that is literally uplifting, we connect to our brand character of empowering our customers.
Confident → Focused
We use a sense of focus in our motion identity to communicate the confidence we can instill.
Inspired → Dynamic
When the time’s right, we’re dynamic. This inspires excitement and movement about Dialpad.
Motion Behavior
Motion graphics should always use our consistent motion curve as illustrated here.
Animating in should use the ease out curve: cubic-bezier(0.35,0,0.1,1).
Animating out should be reversed using ease in curve: cubic-bezier(0.9,0,0.65,1).
Related CSS Utilities
Dialtone offers Transition CSS Utilities for Product UI.
Animate in (ease-out)
cubic-bezier(0.35,0,0.1,1)
Animate out (ease-in)
cubic-bezier(0.9,0,0.65,1)
Elevate
Move up & fade In
Scale up
Diagonal scale from left corner with fade in. Animate out to right corner with fade out.
Scale out
Scale in from center with fade in. Scale out to center with fade out.
Transform
Modules can dynamically transform and shape to accommodate layout shifts.