---
url: "/bannerify/animation/selecting-animations.md"
description: "Choose from dozens of pre-defined keyframe based animations for your banner layers."
---

# Selecting animations

> Choose from dozens of pre-defined keyframe based animations for your banner layers.

### Video Tutorial: Animate and export banners to HTML from Figma

This video tutorial is a complete step-by-step guide showing you how to animate and export production-ready HTML banners from Figma in seconds.
[Embedded media](https://www.youtube.com/embed/-TA088FNulA)

## Animations

Bannerify comes with dozens of pre-defined keyframe based animations, which are grouped into 5 categories:

- Entrances
- Exits
- Basic Transforms
- Attention Seekers
- Background Pans

> **Tip:** **Using Split Text animations**. Bannerify also includes a dedicated set of split character, word, and line animations for supported text layers. See [Split Text Animations](/bannerify/animation/split-text) for the setup steps, supported fonts, and current caveats.

> **Tip:** **Removing animations from a layer**. If you don't want a layer to have any animations, you can either select the **No Entry Animation** and/or **No Exit Animation**, or alternatively, you can rename any Figma layer with the prefix **locked-** (eg. _locked-RectangleBackground_), which will also ensure no animations are added, and will disable the animations select box in the plugin timeline, too.

## Adding entry animations

[Video](/assets/videos/bannerify/animation/select-animations.mp4)

To set an **entry animation**, hover over the layer you would like to animate in the Bannerify timeline and click on the **top select box**. Scroll through the list of animations and **click** on an animation name to apply it to your layer. You'll see the banner preview update instantly with the new animation applied.

## Adding exit animations

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

Adding **exit animations** works the same way as adding entry animations; instead of clicking on the top select box, you can click on the **bottom select box** to select an exit animation for your layer.

> **Note:** Please ensure that any exit animation set on a layer **is set to begin _after_ the "entry" animation ends**, otherwise this will cause issues with both animations overlapping and having conflicting transitions at the same.