Setting the animation easing

Choose easing curves to control the timing of your custom animations.

Video Tutorial: Add custom animations to your Figma banner designs

This video walks through how to add custom keyframe animations to your banners using the Bannerify plugin.

You can choose what kind of easing you need your animation to have by choosing an option from the Easing menu. 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)
  • Ease out
  • Ease in
  • In and out
  • Linear
  • Gentle
  • Overshoot
  • Anticipate

Setting a custom Cubic Bezier easing value ​

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

This video walks through how to add custom cubic-bezier easing to banner animations in Figma using the Bannerify plugin.

To use your own curve, drag the curve's handles in the Easing menu, or paste a valid CSS cubic-bezier value (for example, cubic-bezier(0.65,0.05,0.36,1);) into the field under the presets. 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.