Video Tutorial: Animate and export banners to HTML from Figma
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
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.