Bannerify comes with dozens of pre-defined keyframe based animations, which are grouped into 5 categories:
- 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.
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 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.
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.
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”).
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.
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.
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.
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.