Easing Options
Bonzai avatar
Written by Bonzai
Updated over a week ago

By default, a keyframe applies the Linear ease option. The Linear ease option makes steady change between the start and the end keyframe values.

Canvas supports the following easing options:

  • Linear – Changes steadily between the start and the end keyframes.

  • Ease In – Accelerates steadily from the starting keyframe towards the ending keyframe.

  • Ease Out – Decelerates steadily from the starting keyframe towards the ending keyframe.

  • Ease In Ease Out – Accelerates during first half of the animation and decelerates during the second half of the animation.

  • Back Ease In – Starts by going backwards a little and then accelerates steadily from the starting keyframe towards the ending keyframe.

  • Back Ease Out - Decelerates steadily from the starting keyframe towards the ending keyframe, overshoots the target area a little and returns.

  • Back Ease In Out - Starts by going backwards a little and then accelerates during first half decelerates during the second half of the animation overshooting the target area a little and returns.

  • Elastic Ease In – Starts with damped oscillation a few times at the starting keyframe and then accelerates steadily from the starting keyframe towards the ending keyframe.

  • Elastic Ease Out - Decelerates steadily from the starting keyframe towards the ending keyframe, overshoots the target area, and ends with damped oscillation a few times at the ending keyframe.

  • Elastic Ease In Out – Starts with damped oscillation a few times at the starting keyframe, accelerates during first half of the animation, decelerates during the second half of the animation, and ends with damped oscillation a few times at the ending keyframe.

  • Bounce Ease In – Bounces twice at the starting keyframe and accelerates steadily from the starting keyframe towards the ending keyframe.

  • Bounce Ease Out – Decelerates steadily from the starting keyframe towards the ending keyframe and bounces twice at the ending keyframe.

  • Bounce Ease In Out – Bounces twice at the starting keyframe, accelerates during first half of the animation, decelerates during the second half of the animation, and bounces twice at the ending keyframe.

Did this answer your question?