How to use Timeline

Using the Timeline

The Timeline offers you a variety of options to bring your designs to life by arranging and animating your layers. You can adjust the timing of your layers and apply animations to each layer individually ranging from simple animation presets to custom built animations.

How to use the Timeline?

Open the Timeline from the bottom left side of Ad Studio. If you are working on a design set you will need to enter focus mode on one of the sizes by double clicking the size to access the Timeline.

On the Timeline you can:

• Adjust the timing/duration of your layers by dragging them
• Add animations to your layers and customize them
• Create custom animations
• Change the duration of your slide
• Preview the current slide with the Play button
• Use the Scrubber to manually go through the Timeline previewing a specific part
• Enable the Show current frame to see the exact frame where the Scrubber is positioned (Editing is disabled with this option)
• Enabled the Show visible layers option to see only the layers which would be visible at the current Scrubber position for ease of editing
• Use the Eye icon next to the name of your layers to hide/show them
• Set the position of your Fallback image

Animations

You can apply 3 types of animation to each of your layers:

• Build In
• Middle
• Build Out

To add animations

1. Click the Build In/Middle/Build Out section of the layer
2. Select an animation
3. Click the Edit button on the top left to further customize animation presets
4. Drag the sides of the section to increase/decrease the duration of it

Custom animations

You can also use the Build yours option to create custom animations from scratch. This offers you 5 actions that you can combine or add multiple instances of:

• Move
• Rotate
• Scale
• Opacity
• Blur

To use custom animations

1. Click on the section that you would like to apply it to and select Build yours
2. Select the type of action you want to use (Move, Rotate, Scale, Opacity, Blur)
3. You can click the same action type to add multiple instances of it
4. Each type of action will have its own row under Build yours animation on your layer
5. Adjust the position/duration of an individual action by dragging it on the Timeline (can be adjusted at increments of 0.01 seconds)
6. Dragging the Build yours animation will affect all of the actions added (can be adjusted at increments of 0.1 seconds)
7. Click on the action itself to customize the properties of it

Animation properties

Each animation type will have certain properties that you can customize, depending on the animation itself. All animations have an Ease and a Tween type which controls how the element moves. 

Most Build In and Build Out will also have an Alpha property which controls the opacity of the element during the animation. For Build In animations, a value of 0 will result in the animation starting with the element fully transparent and fading in during the animation, while a value of 100 will result in the element being fully visible from the start of the animation. For Build Out animations a value of 0 will result in the element fading out completely until the animation and a value of 100 will result in the element remaining fully visible until the end of the animation.

Notes: 

• Layers with a Build Out animation will not be visible in the design after the animation ends.
• When animating a text layer you will find Build In and Build Out presets which are specifically available for text elements: Words Fade, Words Blur, Tracking and Shadow (the latter one only available as a Build In preset). These animations will not work when converting your custom fonts to SVG
• You can break animations into separate actions by clicking on the preset, selecting Edit and clicking Split to actions. This option is available for every preset except 3D presets (Slit, Step, Fly, Tilt, Swing, Flip and Reveal) and animations specifically for text layers.