Timeline Animation

You can arrange and visualize the layers from your design or design set in the Ad Studio. Furthermore, you can apply three types of animations to each layer from your creative(s). In this article, we'll show you how to use the timeline and apply animations to your design or design set.

Timeline Introduction

The timeline is designed to assist you in creating dynamic animations with precision and ease. From here, you can manage frames, transitions, and effects efficiently. You can reorder, trim, and enhance each layer from your creative(s). You can also play your creative at any point in the timeline to see how your edits will look.

How to Use the Timeline

1. Head over to the bottom of the left sidebar.
2. Click on Timeline.
3. On the timeline, you can:
   • Add animations to your layers.
   • Create advanced animations.
   • Show the current frame and visible layers, and the reset play position.
   • Set the duration of the slide.
   • Set the fallback image for your design.
   • Re-arrange layers by dragging them above or below other layers.
   • Use the Scrubber to highlight a specific frame from the creative.
   • Use the Eye icon to show or hide layers. 

Animation Presets

Creatopy's Animator allows you to apply animation presets or custom animations to your layers within the creative(s).

You can apply three types of animations to each layer from your design.

• Build In.
• Middle.
• Build Out.

How to Use Animation Presets

1. Open the Timeline.
2. Identify the layer where you want to apply the animation.
3. Select where you want to apply the animation.
   • Build In.
   • Middle.
   • Build Out.
4. Select the type of animation preset you'd like to use¹.
5. You can increase or decrease the duration by dragging the slides according to your needs.
6. You can drag&hold to move the whole layer on the duration axis.

Custom Animations

As mentioned above, you can create your custom animations from scratch using five actions (Move, Rotate, Scale, Opacity & Blur) by selecting the Build Yours option.

How to Apply a Custom Animation

1. Open the Timeline.
2. Identify the layer where you want to apply the animation.
3. Select where you want to apply the animation.
   • Build In.
   • Middle.
   • Build Out.
4. Click Build Yours.
5. Select the type of action you want to use².
   • Move.
   • Rotate.
   • Scale.
   • Opacity.
   • Blur.
6. Every action will have its row, and if you add more of the same action (e.g., Move), they will be placed to the right of the last action added.
7. You can click&drag on an animation to increase or decrease its duration.
   • Changing the duration of the whole Build Yours preset will also change the duration of all associated actions. The duration of the preset can be changed at increments of 0.1 seconds.
   • Adjusting the duration of an individual action will not alter the duration of other actions associated with the Build Yours preset. The duration of an action can be changed at increments of 0.01 seconds.
8. You can click&drag on the animation to change its position in the timeline.
   • Adjusting the position of the whole Build Yours preset will also move all the actions linked with it.
   • Moving an action can alter the positioning of other actions, depending on where they're located.

Note¹: You can break animation presets into actions by selecting the preset > Go to Edit > Click on Split to actions. You can use the Split option for every available preset, with the only exception being the 3D presets (Slit, Step, Fly, Tilt, Swing, Flip, and Reveal).

Note²: You can add up to 20 of the same action to a layer. For example, if you create an animation with the Build Yours preset for the middle animation, you can have 20 individual Move actions, which you can adjust and play with as you wish.