Documentation Index

For the complete documentation index, see llms.txt. Markdown versions of docs pages are available through the page's alternate Markdown link.

Current page: Setting the animation easing - Choose easing curves to control the timing of your custom animations.. Machine-readable page: /bannerify/animation/animation-easing.md.

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 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 walks through 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 need to paste in a valid CSS cubic-bezier value (for example, 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.