Enhancing user engagement in your advertisements can be achieved by incorporating interactive elements such as play, pause, jump, and stop controls. BannerNow provides widgets that facilitate the creation of such interactive ads.
Available Widgets:
- Timeline Pause Points Widget: Pauses the animation at specified times.
- Pause Button Widget: Pauses the animation at its current position.
- Play/Jump Button Widget: Starts or jumps the animation to a defined position.
- 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: