Timing

Linear movements do not exist in nature, and they appear unnatural and mechanical to the human eye.

UI's animated elements speed up quickly and slow down smoothly; There are many ways to define the precise amount of acceleration and deceleration of the element during the animation. The most common are the cubic-bezier easing curves, spring and tween animations.

Here an example of a cubic-bezier easing curve compared to a linear (unnatural) movement.

Easings

Wanda provides 3 easing curves which you can use to define the animation's speed over the timeline.

{
  "standard": "cubic-bezier(0.3, 0.07, 0.34, 1)",
  "entrance": "cubic-bezier(0, 0, 0.34, 1)",
  "exit": "cubic-bezier(0.3, 0.07, 1, 1)"
}

Standard easing

This easing applies a cubic-bezier curve to the animation, making the element start moving smoothly with a slight acceleration and end with a slow deceleration.

Entrance easing

Incoming elements use the entrance easing, in which transitions begin with peak velocity, then slow down at the end of the animation.

Use the entrance easing curve when adding elements to the view like modal or snack bars, or in response to the user's input, such as dropdowns and toggles.

Exit easing

Elements exiting a screen use the exit easing, such as closing a modal or dismissing a toast. The element speeds up as it exits from view, implying that its departure from the screen is permanent.

Spring

Spring animations are a variation of the easing curves, but instead of relying on the time over the duration, the animation is calculated based on physics parameters.

There is no way to handle these animations by using only CSS. To create advanced animations using this mechanic, you must rely on advanced animation frameworks like Framer Motion (used by Wanda) and GSAP.

Such animations are more complex and physics-based. For this reason, they look more natural to the human eye.

Try to drag the box below to see spring animations in action.