In advanced animation keyframe mode each property of the element (move x, move y, scale x, scale y, opacity, rotation) can be animated separately using keyframes.

To enable the keyframe mode – click the “animation” icon on the layer.

Select all the properties you want to animate for this layer from the menu.

Animation properties that are selected will appear right under the selected layer

Keyframes represent a specific value for properties (position, scale, opacity, rotation) in time.

Keyframe animation means that animation will transition from one keyframe to another and animate a specific property (ex Opacity, Move X).

For example if you have 3 keyframes on item’s opacity animation:

1st keyframe – 0s, value 0%

2nd keyframe – 1s, value 100%

3rd keyframe – 5s, value 50%

This means that opacity will start animating on 0s from 0% to 100% (animation duration 1s).

Then it will animate from 100% on 1th second to 50% on 5th second (animation duration 4s)

Keyframe can be added by clicking the plus rhombus shape or double-click right on the timeline (or you can double-click on the timeline where you want create a keyframe).

Click on the keyframe itself to edit it’s value.

To make your animation more realistic, you can add easing by selecting one in the keyframe properties top dropdown menu.

You can also add keyframes on the “non visible area” to make the start animation before item becomes visible. The non visible/hidden area has a pattern overlay.

On the bottom of the screen, there is a Timeline area with the following:

• Left-side menu: Layers
• Right-side menu: Transitions.

The corresponding layer and transition of the selected element are highlighted in the Timeline.

Appear Effect – this is the first section of the transition slider. You can adjust its size using the handles and change the duration of the effect. To apply the appear effect, click on this first section of the transition. This will prompt a popup modal to appear, allowing you to select the desired effect type.

1. None – Item instantly appears on the stage without any transitions.
2. Custom – Item appears with a custom effect that you can configure manually.
3. Fade In – Item appears with a fade-in transition.
4. Scale In – Item appears with a scale in transition.
5. Left In – Item appears moving/transitioning from the left of the banner’s border to the current position on the stage.
6. Right In – Item appears moving/transitioning from the right of the banner’s border to its current position on the stage.
7. Up In – Item appears moving from the top of the banner’s border down to its current position on the stage.
8. Down In – Item appears moving from the bottom of the banner’s border up to its current position on the stage.

and more…

Now, let’s group two elements together and apply the appear effect to the entire group. When you preview the animation, you’ll notice that all the elements within the group scale together. For a more captivating animation, you can assign different appear effects to the individual elements within the group. You’ll be amazed by the result!

On the bottom of the screen, there is a Timeline area with the following:

• Left-side menu: Layers
• Right-side menu: Transitions.

The corresponding layer and transition of the selected element are highlighted in the Timeline.

Custom Effect – A way to customize your animation if you are unable to find the desired behavior from default transitions. Custom effects can be applied only to appear and disappear effects:

Custom effects can be set up from the Custom Modal, which can be accessed by selecting the appear or disappear section in the transition slider and selecting the Custom option.

The Custom Modal includes a small preview window above the modal ( this allows you to view how your custom animation will look – it’s an approximate preview).  The four sections (1-4) represent Look Options – opacity, scale & rotation; Scene & Rotation point options – this point will be used as a pivot when animation an element; Positioning options – position type and position coordinates; Animation Style Animation Easing and Duration. 

Position type defines whether custom animation will use absolute positions/coordinates, offset positions or a pre-defined set of positions.

Animation easing specifies the speed curve of an animation.

You can also save the custom effect as a preset and reuse it in different banners.

The Timeline is a very powerful feature of BannerNow. It gives you full control of your banner animation. Also, any time you add a new element on stage, a corresponding layer with transition is created on the timeline.

Use layers and folders (left side of the timeline) to arrange elements on the stage (the higher a layer is on the timeline, the higher the corresponding element appear on stage).

You can also assign names to layers for organization, and lock and hide corresponding elements as well.

Use transitions (right side of the timeline) to configure the Animation Effects of elements. Transitions consist of 3 parts/sections that can be configured: Appear Effect – how an element appears, Stay Effect – middle state, and Disappear Effect – how an element disappears.

Use the mouse to drag transitions on the timeline –  this will set a delay of animation for a particular element. You can also use the mouse (handlers between transition sections) to resize appear, stay and disappear parts of the transitions to set the duration of each animation section.

Use multiselect to move all the layers on your timeline to save time.

Zoom the Timeline from the view menu on the bottom-left of the Timeline.