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.
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
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
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 on 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.