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 tutorial is a complete step-by-step guide showing you 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 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

This video tutorial is a complete step-by-step guide showing you how to add custom cubic-bezier easing to banner animations in Figma using the Bannerify plugin.

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.