MenuToggle Menu

Easing

Enhance your animations with realistic movements using the easing features in ProtoPie.

In real life, objects don't abruptly start or stop moving. That's why it's crucial to include easing in your prototypes to achieve natural animations.

By incorporating easing functions, you can create visually captivating and engaging transitions that add a sense of realism and natural movement to your designs like in the following example.

[object Object]

Learn how easing was used in this example in our newest Mobile Game prototyping masterclass.

Standard Easing Options

Linear

With Linear easing, there are no accelerations or decelerations during the animation. The object moves in a smooth and uniform manner, maintaining a steady pace throughout the transition.

Ease

Ease easing is used to control the acceleration and deceleration of transitions. It adds a sense of smoothness and natural movement to objects or elements that are animated or transitioning between states.

Ease In

Ease In easing is used to control the initial acceleration of transitions. It focuses on creating a gradual and gentle start to the animation, where the object or element starts moving slowly and then gains speed as the animation progresses.

Ease Out

Ease Out easing is used to control the deceleration of transitions. It focuses on creating a gradual and smooth slowing down of movement as the animation comes to an end.

Ease In Out

Ease In Out easing is used to create smooth and balanced transitions. It combines the characteristics of both Ease In and Ease Out easing to provide a gradual acceleration at the beginning, a consistent speed in the middle, and a gradual deceleration towards the end of the animation.

EaseIn
  • easeInSine
    (0.12, 0, 0.39, 0)
  • easeInCubic
    (0.32, 0, 0.67, 0)
  • easeInQuint
    (0.64, 0, 0.78, 0)
  • easeInCirc
    (0.55, 0, 1, 0.45)
  • easeInElastic
  • easeInQuad
    (0.11, 0, 0.5, 0)
  • easeInQuart
    (0.5, 0, 0.75, 0)
  • easeInExpo
    (0.7, 0, 0.84, 0)
  • easeInBack
    (0.36, 0, 0.66, -0.56)
  • easeInBounce
EaseOut
  • easeOutSine
    (0.61, 1, 0.88, 1)
  • easeOutCubic
    (0.33, 1, 0.68, 1)
  • easeOutQuint
    (0.22, 1, 0.36, 1)
  • easeOutCirc
    (0, 0.55, 0.45, 1)
  • easeOutElastic
  • easeOutQuad
    (0.5, 1, 0.89, 1)
  • easeOutQuart
    (0.25, 1, 0.5, 1)
  • easeOutExpo
    (0.16, 1, 0.3, 1)
  • easeOutBack
    (0.34, 1.56, 0.64, 1)
  • easeOutBounce
EaseInOut
  • easeInOutSine
    (0.37, 0, 0.63, 1)
  • easeInOutCubic
    (0.65, 0, 0.35, 1)
  • easeInOutQuint
    (0.83, 0, 0.17, 1)
  • easeInOutCirc
    (0.85, 0, 0.15, 1)
  • easeInOutElastic
  • easeInOutQuad
    (0.45, 0, 0.55, 1)
  • easeInOutQuart
    (0.76, 0, 0.24, 1)
  • easeInOutExpo
    (0.87, 0, 0.13, 1)
  • easeInOutBack
    (0.68, -0.6, 0.32, 1.6)
  • easeInOutBounce

Cubic Bezier

Cubic Bezier easing is used to provide precise control over the acceleration and deceleration of transitions. It allows you to define custom curves by adjusting its four points (two anchor points and two control points), offering flexibility and the ability to create unique and complex motion effects.

Example
  • Cubic-bezier
    (0.39, 0, 0.23, 1)
  • Cubic-bezier
    (0.71, 0.41, 0.32, 0.76)

Spring

Spring easing is used to simulate the motion of a spring. It adds a dynamic and bouncy effect to transitions, mimicking the behavior of a physical spring being stretched and released.

Example
  • Tension 600, Friction 16
  • Tension 250, Friction 19

Custom Easing Options

Creating Custom Easing Presets

In ProtoPie, you have the ability to create custom easing presets. Follow these steps to create your own custom easing:

  1. Choose a standard easing option from the Standard easing list.
  2. Click the "+" button to add a new easing preset.
  3. Modify the duration and predefined values by either entering new values or dragging the control points to your desired position.
  4. Double-click above the input area to rename the easing preset.
  5. The newly created easing preset will be saved in the Custom easing list, making it readily available for future use.

Exporting & Importing Custom Easing Presets

After creating a new custom easing preset, you can choose to export it as a .json file to your local computer. This file will include all the presets currently in the Custom list. This feature enables you to effortlessly share the easing presets with your team members or keep them for future use, especially if you switch to a different device.

[object Object]
Back To Top