Video Tutorial: Add hover animations to your Figma banner designs

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.

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.