Video Tutorial: Add hover animations to your Figma banner designs

This video tutorial is a complete step-by-step guide showing you how to add hover animations to your banners using the Bannerify plugin.

You can add a hover animation state (for HTML exports) to any layer in your timeline by clicking on the Add Hover toggle, and then selecting a hover animation from the revealed drop down selector. You can set the animation to repeat by enabling the Loop toggle, and you can adjust the speed of the hover animation by dragging the speed slider next to it.

To preview how the animation looks, you can hover over the layer with your mouse in the Bannerify preview window.

Applying a hover animation to multiple layers. You can also apply a hover animation in bulk to multiple layers by using the bulk apply feature.

Adding transitional hover states

If you'd like to transition between two different states (for example, hovering over a CTA button and changing its colors), you can do that by creating your "hover" state layer and placing it above your original layer and applying the entry hover state to ensure it transitions in whenever that element is hovered over.