Setting the animation easing

Video Tutorial: Add custom animations to your Figma banner designs

You can choose what kind of easing you need your animation to have by choosing an option from the Animation Easing select box. Easing is automatically applied to your entire timeline, and will update the Live Preview area so you can see how your selected easing changes how your keyframe animation moves.

You can choose from the following easing options:

  • Ease (Default)
  • Linear
  • Ease In
  • Ease Out
  • Ease In Out
  • Cubic Bezier

Setting a custom Cubic Bezier easing value ​

Video Tutorial: Add cubic bezier easing to banner animations in Figma

If you select the Cubic Bezier easing option, you'll need to paste in a valid CSS cubic-bezier value (eg. cubic-bezier(0.65,0.05,0.36,1);). You can generate a custom cubic beizer curve, by using a site like https://easings.co/, or any other website service that you prefer to help to generate custom CSS cubic-bezier curves.