Using the Timeline – Bannersnack

The timeline represents probably one of our most signature features that allows our customers to easily manipulate their animated content in terms of duration, animation type and layer positioning. Using the timeline you can quickly edit your layers' time span, delay, and placement. You can even scrub the timeline to check specific frames without having to go through the entire duration of your design.

How does the Timeline work?

Here are a few key tips that you should consider before you get started with the Timeline feature:

1. You can show or hide the Timeline by clicking on its designated action button found in the lower right corner of the editor.

2. You can quickly change the duration of a slide by dragging the time bar on the duration axis.

3. One of the most time-saving features is the fact that you can easily set a build in and build out animation by selecting a preset from our list of predefined templates.

4. On top of that, you can always apply an advanced customization on your animations by going into the Advance mode tab, and you can even check out our related article about advanced animations to get a better grip of how they work.

5. Another cool thing is the fact that you can set the build in and build out duration just by dragging them either to the left or to the right. You will be prompted with the duration of the slide in real time, measured in seconds.

6. You can also easily select the layers' duration and delay as shown in the below GIF.

7. Layers can also be re-arranged by simply dragging and dropping them in place, one above the other. This will also determine the order in which they are showing on the design so if you place a background image above a logo or any other layer, they will no longer be visible as they are now situated behind (below) the image.

8. Middle animations can also be applied in the timeline for each specific layer. If you'd like to read more about this feature, check out our related article, here, dedicated fully to middle animations, how they work and how to get the most out of them.