---
url: "/bannerify/animation/editing-keyframe-properties.md"
description: "Customize X, Y, Scale, Rotation, and Opacity properties for your keyframes."
---

# Editing keyframe properties

> Customize X, Y, Scale, Rotation, and Opacity properties for your keyframes.

### 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/editing-properties.mp4)

You can edit 5 different properties for any of your animation keyframes. Any differences in properties between your keyframes will automatically be animated; for example, setting scale to 2x on the 0% keyframe, and setting scale to 1x on the 100% keyframe will automatically create a "shrinking" animation.

- The **X** property will animate your element's left/right pixel position (in pixels).
- The **Y** property will animate your element's top/bottom pixel position (in pixels).
- The **Opacity** property will animate your element's transparency percentage.
- The **Rotate** property will animate your element's rotation degrees.
- The **Scale** property will animate your element's size.

### Using Percentage Based Relative X/Y Transforms

If you would prefer to set X/Y positioning based on the percentage of the animated element, you can enable the **Relative % Transforms** toggle in the keyframe properties panel, which will allow you to set a percentage value for your X/Y values (instead of pixels).

Applying a percentage X/Y transform value will automatically animate the element that the animation is applied to by using its position, and applying the percentage transform to that size; for example, setting a `10%` X transform value on a keyframe will animate a layer that's `100px` wide, by `10px`. Applying that same animation with a `10%` X transform value to a layer that's `200px` wide, will animate the layer by `20px`.

### Splitting Scale into X/Y Scale Options

If you would prefer to set the scale values for each X/Y axis individually, you can click the **Unlock Scaling** toggle in the keyframe properties panel, which will allow you to set the horizontal and vertical "Scale" values for your keyframes independently, rather than equally scaling them both for an even scale up or down animation.

This setting can be useful if you need to animate the width or height of a layer, without also affecting other X/Y axis at the same time.