---
url: "/bannerify/animation/creating-keyframes.md"
description: "Add and manage keyframes on your custom animation timeline."
---

# Creating custom animation keyframes

> Add and manage keyframes on your custom animation timeline.

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

When you open the animations panel, you'll see 2 keyframes; the first keyframe (0%) and the final keyframe (100%). These are added by default and can't be removed, as a keyframe animation needs at least one frame to start the animation from and a keyframe to show where it ends.

### Selecting a keyframe to edit

You can instantly swap between any keyframes by clicking on a keyframe under the **Animation Timeline** near the top of the custom animations panel. Clicking on a keyframe will allow you to edit the properties for that specific keyframe.

### Inserting new keyframes

You can easily add more keyframes in between the default start/end (0%/100%) keyfarmes to create more complex keyframe animations. To add a new keyframe to your timeline, enter your new **keyframe percentage** (eg. **50**) in the input field, then click on the **Insert New Keyframe** button to insert a brand new keyframe at that percentage in the timeline.

Any new keyframe that you add will automatically be created with the same properties that your currently selected keyframe contains; this allows you to easily adjust properties based on other keyframes you've already added. Your newly added keyframe will also be automatically selected after you click the **Insert New Keyframe** button.