Animation Curves

When an object moves, it does not speed up or slow down instantaneously. Hence, users find it more natural when an object accelerates and decelerates while in movement. Making use of the Easing function, the Cubic-Bezier and Spring can help create such natural movement.

Easing

This is a preset for acceleration seen commonly in the prototype. The Easing function can be set up by selecting ease-in, ease-out or ease-in-out in the Property panel.

EaseIn
  • easeInSine
  • easeInCubic
  • easeInQuint
  • easeInCirc
  • easeInElastic
  • easeInQuad
  • easeInQuart
  • easeInExpo
  • easeInBack
  • easeInBounce
EaseOut
  • easeOutSine
  • easeOutCubic
  • easeOutQuint
  • easeOutCirc
  • easeOutElastic
  • easeOutQuad
  • easeOutQuart
  • easeOutExpo
  • easeOutBack
  • easeOutBounce
EaseInOut
  • easeInOutSine
  • easeInOutCubic
  • easeInOutQuint
  • easeInOutCirc
  • easeInOutElastic
  • easeInOutQuad
  • easeInOutQuart
  • easeInOutExpo
  • easeInOutBack
  • easeInOutBounce

Cubic-Bezier

You can create a customized easing curve with 4 numbers defining a Cubic-Bezier curve using the visual easing curve editor.

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

Spring

Spring curves make it possible to create dynamic animations where objects bounce.

*ProtoPie Studio will feature visual previews of spring curves and generation of spring curves within the app in a future update.

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