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 walks through how to animate and export production-ready HTML banners from Figma in seconds.

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

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 for the setup steps, supported fonts, and current caveats.

Using native Figma Motion animations. Choose a detected animation from the Figma Motion group on an individual layer, or choose Apply Each Layer's Figma Motion from the Batch Layer Actions entry menu. After Motion is applied to at least one layer, enable Mirror Figma Motion Timings above the timeline if you also want native Figma timing offsets. See Using Figma Motion animations for the complete opt-in steps and supported properties.

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- (for example, 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 ​

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 ​

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

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.