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

Adjusting the timeline length

You can adjust the length of the entire timeline itself for all of your banners by clicking on 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 on 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 delays

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 on the second value in your timeline layer, and entering a new number with your keyboard (eg. 1.5) to set the amount of seconds.

Animating nested child layers individually

By default, Bannerify only loads in the direct child layers of your top level frames or instances, which simplifies the timeline and limits the amount of individual image assets that are exported with your HTML.

However, you can customise the nested child layers that are included by clicking on the list icon in the header bar for any of your banners. This will bring up the layer tree for your banner, where you can expand any layers with nested child layers to include them as animatable layers in your timeline.

Closing this panel will automatically refresh your banner to reveal all of the nested children you exposed in your timeline as new individual layers in your timeline.

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 (eg. “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 on 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 will be able to 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.

Previewing your banner animations in the timeline

You can preview your animations in your banners by clicking on the Play icon button, and pause the timeline at any point by clicking on the Pause icon button. You can also restart the animation playback from the beginning by clicking on 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.

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.