Documentation Index

For the complete documentation index, see llms.txt. Markdown versions of docs pages are available through the page's alternate Markdown link.

Current page: Adding hover animation states to layers - You can add animated hover states to any layer in your Bannerify timeline, which will be included in any HTML exports from the plugin.. Machine-readable page: /bannerify/animation/hover.md.

Adding hover animation states to layers

You can add animated hover states to any layer in your Bannerify timeline, which will be included in any HTML exports from the plugin.

Video Tutorial: Add hover animations to your Figma banner designs

This video walks through 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 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 want 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.