Video Tutorial: Animate and export banners to HTML from Figma

This video walks through how to animate and export production-ready HTML banners from Figma in seconds.

Selecting 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

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.

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- (for example, locked-RectangleBackground), which will also ensure no animations are added, and will disable the animations select box in the plugin timeline, too.

Previewing your banner animations in the timeline

You can preview your animations in your banners by clicking the Play icon button, and pause the timeline at any point by clicking the Pause icon button. You can also restart the animation playback from the beginning by clicking the Restart icon button.

To jump to a certain part of the timeline, you can click on any point in the timeline Seconds header on any banner, or you can click and drag your mouse left and right to scrub through the timeline that way, too.

Adjusting the timeline length

You can adjust the length of the entire timeline itself for all of your banners by clicking the Timeline select box in the Bannerify header; selecting a length (with options from 3 seconds to 3 minutes) will automatically extend or shrink the Bannerify timeline for all of your banners. Bannerify will do its best to update your existing animations if they previously extended beyond a new shorter timeline, and vice-versa.

You can't automatically undo timeline length updates. Selecting a new timeline length will apply the changes to the timelines across all of your banners. You will need to manually update your timeline animations again if you change your mind. With this in mind, it's usually worth setting your timeline length before starting to work on your animations.

Adding exit animations

Adding exit animations works the same way as adding entry animations; instead of clicking 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.

Adjusting animation speeds and timings

You can adjust the speed and delay of your animations by clicking down on the left/right edges of the timeline bar for your layer, then holding and dragging with your mouse to adjust the length of your animation and it's start/end point.

You can shift the location of your animation on the timeline by clicking down on the middle of the timeline bar for your layer, then holding and dragging with your mouse; moving it either left or right to change where it is placed in your timeline.

Use your keyboard to input precise timing numbers. If you'd prefer not to use the timeline slider, you can also set your speed and delay values by clicking the second value in your timeline layer, and entering a new number with your keyboard (for example, 1.5) to set the amount of seconds.

Looping animations

If you have an animation on a specific layer that you would like to repeat infinitely (even after the banner timeline has finished), you can enable the Loop toggle next to the animation you've selected. This can be handy for very short animations that lend themselves to a looped playback (for example, "Heartbeart", "Flicker" or "Pulse").

Copy/pasting animations

You can quickly copy an animation from one timeline layer to another by using the Copy and Paste buttons. Clicking the Copy button will copy the animation, which can then be pasted by clicking the Paste button on any other layer.

Pasting a copied animation to multiple layers You can also apply your copied animation in bulk to multiple layers by using the bulk apply feature.

Applying bulk animations

To quickly apply an animation to multiple layers at the same time, select some layers using the checkboxes next to each layer name (or use Quick Select Layers feature), then set your animation in the slide-up area at the bottom of the plugin window. Once you're happy with your animation, click the Apply animations to layers button to apply the new animation to all of the selected layers.

Quick selecting similar layers

If you're working with a banner set that contains multiple banners with the same elements or layers, you can use the Quick Select Layers select box in the Bannerify header to automatically select similar layers across all of your banners. This can be a great alternative to manually checking each layer.

Example of using Quick Select Layers For example, if all of your banners contain a layer called CTA Button, you can click on that option to automatically check all the CTA Button layers for you. This will then allow you to bulk apply animations to that layer across all of your banners at the same time.

Using magic delays and magic speeds

The Magic Delay and Magic Speed select boxes in the Bannerify header allow you to automatically apply timings to all of your layers, across all of your banners with one click.

Magic Delays

If you want all of your layers in all of your banners to have a staggered delay offset, you can click on the Magic Delay select box in the Bannerify header; selecting a delay (from 0.1 seconds to 0.5 seconds) will automatically apply that staggered delay to every layer's timeline in Bannerify for each banner.

Magic Speeds

If you want all of your layers in all of your banners to be the same speed, you can click on the Magic Speed select box in the Bannerify header; selecting a speed (from 0.1 seconds to 1 second) will automatically apply that speed to every layer's timeline in Bannerify for each banner.

You can't automatically undo magic speeds/delays. Selecting a magic speed or delay option will apply the changes to the timelines across all of your banners. You will need to manually reset them again if you change your mind.