---
url: "/bannerify/animation/animation-easing.md"
description: "Choose easing curves to control the timing of your custom animations."
---

# 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.
[Embedded media](https://www.youtube.com/embed/Js4uSQ855uo)

[Video](/assets/videos/bannerify/animation/changing-easing.mp4)

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.
[Embedded media](https://www.youtube.com/embed/uS2TRRQiYzw)

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/](https://easings.co/), or any other website service that you prefer to help to generate custom CSS cubic-bezier curves.