Available Widgets:

1. Timeline Pause Points Widget: Pauses the animation at specified times.
2. Pause Button Widget: Pauses the animation at its current position.
3. Play/Jump Button Widget: Starts or jumps the animation to a defined position.
4. Play/Pause Toggle Widget: Toggles between playing and pausing the animation, similar to a YouTube video player.

1. Timeline Pause Points widget

This widget will pause the timeline on the specific time points.

Navigate to Add → Widget → Timeline Pause Points

Place the widget anywhere, even outside the canvas.

In the widget settings panel, define the times (in seconds) where the animation should pause (e.g., 5s, 11s, 18s).

The animation will pause at these specified times until the user clicks the Play button widget.

2. Pause Button widget

This widget pauses the animation at its current position on the timeline.

3. Play/Jump Button widget

This widget will start playing from the defined position (leave the Play from seconds input empty to play from the current timeline position).

In the settings, specify the time (in seconds) from which the animation should start or jump. Leave this input empty to play from the current timeline position.

Play/Pause Toggle widget

This widget functions as a play/pause toggle control, similar to those found in video players.

Creating an Interactive Banner Example:

Suppose you have a banner featuring three products, each appearing at different times:

1st Product: Appears at 5s

2nd Product: Appears at 11s

3rd Product: Appears at 18s

Add the Timeline Pause Points widget.

Set pause points at 5s, 11s, and 18s to halt the animation when each product appears.

Add the Play Button widget and customize it to match your design.You can adjust icon color, size, hover color, or upload your own play icon and select the transparent layout for the Play button widget.

Place each Play Button widget over the corresponding product image.

To keep things organized, we can make a separate folder for each Play button layers.

Tip: you can use Copy and Paste Animation and Position from the uploaded Play button to the Play Button widget (Right Click on the uploaded Play image layer > Copy). Right click on the Widget Play button layer > Paste position & size, Paste animations

Configure each Play button widget to jump to the respective product’s appearance time (e.g., 0.75s for the 1st product, 7s for the 2nd, and 13.25s for the 3rd).

Recap:

We have designed a banner with 3 products.

Each product has it’s own animation on the timeline:

1st product starts to play from 0.75s, appear animation ends at 5s

2nd product starts to play at 7s, appear animation ends at 11s

3rd product starts to play at 13.25s, appear animation ends at 18s

We have added the Timeline Pause Points widget to stop the animation at 5s, 11s and 18s

Then we have added 3 Play Button widgets that are always visible with the “Start animation from” set to 0.75s, 7s and 13.25s

When the creative will load it will start playing from 0s and will pause at 5s.

Now user can click on any Play Button widget and the animation will jump accordingly (for example click on 3rd product Play Button widget will jump to 13.25s and then will pause at 18s and so on…)

Here is the final result:

How to do that? Please watch the video below.

Let’s first create a simple animation with 2 texts that appear “from left”.

As you can see the text is overlapping the white vertical line.

We need to add a mask to the text layers to make it look as if it’s running out of line.

Add a new rectangle shape and make sure that it covers the text and has the same X and Y position as the vertical line.

Right-click on the shape layer and select Mask. The mask will be applied to the first layer under the shape layer.

When an object is converted to a mask, it has a mask icon in the front of the layer name. You can add more layers under the same mask by simply dragging the layer to the mask group.

And now, thanks to the power of clipping mask, the text is running from the vertical line without overlapping it.

And there we have it! That’s how clipping masks work in BannerNow!

Visit our Knowledgebase page for more tutorials!

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.

The Tools Panel contains tools for creating, editing stay effects and save presets.

Select the effect type.

Loop duration refers to the time of one transition (in seconds).

Repeat refers to how many times the transition needs to be repeated (for unlimited looping set it at -1).

Delay between transitions.

Each “stay” effect type has it’s own custom settings that can be also adjusted.

In order to open the Preview Modal click Preview button.

The Banner Preview modal will display the current state of your banner. It also features a few options that can be applied: Use the Autofit switch to perfectly fit the preview modal in your browser.

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.

Animation effects can be assigned to any element (image, text, button, shape). In order to access animation effect properties, you’ll need to select (activate) the desired element on the stage.

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.

Disappear Effect – this is the 3rd section of transition slider. You can resize it using handles to change the duration of this disappear effect. To assign this effect, click this 3rd section on transition. This way, a popup modal will be visible in order for you to choose the desired effect type:

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

Animation effects can be assigned to any element (image, text, button, shape). In order to access animation effect properties, you’ll need to select (activate) the desired element on the stage.

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.

The Stay Effect is the 2nd section of transition slider. You can resize it by using handles to change the effect’s duration. The Stay Effect will play in between the appear and disappear effects. However, if nothing needs to happen, you can assign one of the following effect types (by clicking the middle section on transition slider):

1. None – Component instantly stays on the scene without any transition
2. Custom – Custom stay effect
3. Flash – The flash effect blinks an object
4. Bounce – The bounce effect bounces an object
5. Shake – Shakes the object multiple times horizontally
6. Rotate – Rotate item 360 degrees
7. Tada – Tada effect
8. Swing – Swing effect
9. Wobble – Wobble effect
10. Rubber – Rubber effect