Animating your banners

Video Tutorial: Animate and export banners to HTML from Figma

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.

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.

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.

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.

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.

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.

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.

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.