Ripple Design System


Motion gradually changes an element from one state to another. It can also indicate an interaction.

Use motion with a purpose in mind. This could be to draw attention to important elements or to provide feedback to users.


Each animation needs at least these four parts:

  • Trigger — what causes the animation to happen (gestures, time, etc.).
  • Duration — how long should the transition take.
  • Easing — how an element transitions.
  • Property — the characteristic of the element transitioning (position, opacity, scale, etc.).

Duration (speed)

The duration of motion should be consistent throughout. Use:

  • shorter durations for more subtle motions
  • longer durations for more significant or complex motions.

A general rule of thumb is:

  • 0.06-0.2s for simple interface movements
  • up to 0.5s for more complex or larger movements.
TimeValueCSS Variable
60 milliseconds60msrpl-motion-speed-1
80 milliseconds80msrpl-motion-speed-2
120 milliseconds120msrpl-motion-speed-3
160 milliseconds160msrpl-motion-speed-4
200 milliseconds200msrpl-motion-speed-5
240 milliseconds240msrpl-motion-speed-6
300 milliseconds300msrpl-motion-speed-7
360 milliseconds360msrpl-motion-speed-8
420 milliseconds420msrpl-motion-speed-9
500 milliseconds500msrpl-motion-speed-10


Easing is the rate the motion accelerates or decelerates. It can range from linear to highly exaggerated. The chosen easing should match the desired tone and feeling of the motion.

Currently, Ripple uses default easing values. We use the default names for this reason to reduce clutter in the code.


  • Ease-in: slow at the beginning, fast/abrupt at the end.
  • Ease-out: fast/abrupt at the beginning, slow at the end.

When to use:

  • Ease-in: when things are moving out.
  • Ease-out: when things are moving in.