Animation Timeline

The Animation Timeline lets you create animations by changing element’s position, size, opacity, and rotation over time. This guide walks you through how to add, manipulate, and customize animations using the timeline.

Understanding Animation Blocks:

The Animation Timeline is built around animation blocks, which represent how an element’s property changes over time—for example, moving position, changing opacity, resizing, or rotating. These animation blocks are always contained within a group, and the type of group determines how much you can customize the animation.

Types of Animation Groups

Animation blocks are never standalone—they always belong to a group, and there are two main types of groups:

1. Custom Groups

• Created by the user.

• You control all aspects of each block, including timing and property values.

• Blocks inside the group can be individually selected, moved, resized, or deleted.

• You can create a Custom Group from scratch or by converting a Pre-made or Saved Group (see below).

2. Pre-made and Saved Groups

These are predefined collections of animation blocks, bundled together for quick reuse:

• 🪄 Pre-made Groups

  • Provided by the platform out of the box.

  • Include common animations like "Fade In", "Slide Up", or "Bounce".

  • Available immediately to all users.

• 💾 Saved Groups

  • Created by the user by saving a custom animation group.

  • Can be reused across other elements or creatives.

What is an Animation Block?

An animation block defines the transition of a single property of an element (e.g., position, rotation) from a Start Value to an End Value over a set duration.

Each block contains:

• Start Value: The property's state at the beginning of the block.

• End Value: The property's state at the end of the block.

• Easing: Sets the speed of the transition between the start and end values.

• Duration: How long it takes for the transition to occur.

• Start Time: Where on the timeline the animation begins.

How to Use the Animation Timeline:

The next 10 sections explain how to make best use of the ResponsiveAds animation timeline functionality.

1. Adding/Removing Elements from the Timeline

Adding Elements to the Timeline

Before animating, you need to add an element to the timeline:

1. Select an element from the list (e.g., text, image, shape).

2. Click the Film icon.

3. The selected element is now available in the Animation Timeline.

Removing Elements from the timeline

To remove an element from the animation timeline:

1. Click the filmstrip icon next to the element’s name in the Element List.

2. A pop-up will appear titled “Remove from Timeline”.

   • By default, the currently selected size will be chosen. This means the element will be removed from the animation timeline for that size only.

3. If you want to remove the element from other sizes as well, select additional sizes from the list.

4. Click “Remove from Selected Timelines” to confirm and apply the changes.

2. Working with Pre-made Animations

Adding Pre-made Animations

• Click the “+” button next to the element you want to animate.

• Select an animation from the comprehensive Pre-made list based on your needs.

Manipulating Pre-made Animation

• Move: Drag the group to adjust its start time.

• Resize: Drag the group edges to change duration (this will proportionally resize all animation blocks).

• Copy–Paste: Duplicate the group within the same element or apply it to other elements.

3. Creating Custom Animations

You can create custom animations by manually adding animation blocks to an element. These blocks define how an element's properties (like position or size) transition over time. Custom animations can be added in several ways:

a. Using the “+” Button

1. Click the + button next to the element you want to animate.

2. Select the property you wish to animate — such as Position, Size, Opacity, or Rotation.

3. A new animation block will appear at the current playhead position with a default duration of 1 second (this can be adjusted later).

4. The block’s Start and End values will initially match the element’s current design state — no visible animation will occur until you change one of these values.

b. Using On-Canvas Actions

You can also create custom animations by interacting directly with elements on the canvas:

• Dragging an element → creates a Position animation

• Resizing an element → creates a Size animation

• Rotating an element → creates a Rotation animation

These actions automatically generate an animation block at the current playhead position.

How values are assigned:

• The Start value is based on the on-canvas change (e.g., the position you drag to).

• The End value defaults to the element’s original design state.

c. Double-clicking Timeline Rows

• Double-click a settings row (e.g., Position) in the timeline to add an additional block.

  

Changing Start and End Values

Option 1: Top Bar Inputs

• Use input fields above the timeline to set specific values (e.g., position, size, opacity).

Option 2: On the Canvas

• Move the playhead to the start of the block → adjust the element → sets Start state.

  • Selecting the block always moves playhead to the start position

• Move the playhead to the end of the block → adjust again → sets End state.

  • Moving (dragging) the playhead to the start or to the end of the block will snap nicely to the exact position

Manipulating Animation Blocks

• Move: Drag a block to adjust its start time.

• Resize: Drag the block edges to change duration.

• Copy–Paste: Duplicate blocks within the same element or apply them to other elements.

4. Saved Animations

Save custom animations for reuse:

Saving

1. Select an entire Custom group or several Animation blocks you want to save.

2. Click Save, name your animation, and confirm.

Using Saved Animations

Saved animations are used in the same way as Pre-made animations.

5. Customize Pre-made or Saved Animations

If you would like to change a selected Pre-made or Saved animation, click on the “Customize” button on the top bar.

• This creates a separate Custom animation, leaving the original Pre-made or Saved animation unchanged.

• You can now adjust values of individual animation blocks without affecting the original.

• Save your changes as a new Saved animation if needed.

• Delete the old version of a Saved animation if no longer needed.

6. Controlling Time

The Playhead indicates the current point in time in the animation.

Moving the Playhead

• Drag the playhead to move through the timeline

  • Playhead snaps to the start/end of blocks and groups.

• Type a time to jump directly.

• Click on the timeline to move the playhead.

  • Clicking on the whole numbers puts the playhead at the exact second position (1sec, 2sec etc.)

Timing Animations

• New blocks are inserted at the current playhead position when:

  • You click the + button

  • You make on-canvas changes

  • You double-click a row in the timeline

Adjusting Duration

• Drag an animation block’s or group’s edge to set how long the animation runs.

7. Navigating and Zooming the Animation Timeline

The animation timeline gives you full control over how you view and navigate your animation. Here’s how to work with it effectively:

Playback Controls

• Play / Pause: Preview your animation in real time.

• Jump to Start: Click the back arrow to return the playhead to the beginning (0 sec).

• Jump to End: Click the forward arrow to move the playhead to the end of your animation.

🕓 Animation Duration: The total duration of the animation is automatically determined based on the end of the last animation block.

Overview / Detailed view of all animations

You can collapse or expand all element timeline rows to simplify your view when working with many animated elements.

Zooming and Scrolling the Timeline

Zooming helps you focus on specific parts of your animation or see the full sequence at a glance.

• Zoom In / Out: Use the magnifying glass icons to zoom in or out. Each click adjusts the timeline scale by 1 second.

  • Scroll: When zoomed in, use the horizontal scrollbar to move across the timeline and inspect animation blocks at different time points.

• Slider: Drag to zoom more precisely.

• Reset Zoom: Click this button to fit the entire animation into the visible timeline area.

8. Working with Other Creative Sizes

Animations you create are applied only to the currently selected size.

If you want other sizes to be animated differently, go to the next size and start creating your animations.

If you need to copy created animation across multiple sizes, you have two options:

Option 1: Copy the Entire Animation Timeline to Other Sizes This function copies all animations for all elements.

1. Click the “Copy animation from size to size” button.

2. In the pop-up window, select the target sizes and confirm your selection.

3. Play the animation in the selected sizes to ensure it looks as expected, and adjust as needed.

Option 2: Copy Animations for Specific Elements This function lets you copy animations for specific elements only.

1. Select the element(s) whose animations you want to copy.

2. Click the “Copy element animation from size to other sizes” button.

3. In the pop-up window, select the target sizes and confirm your selection.

4. Play the animation in the selected sizes to ensure it looks as expected, and adjust as needed.

9. Advanced Animation Timeline settings

Animation timeline settings include: looping, restart on scroll into view and parallax scroll. You can find and define them under the “Animation timeline settings” button in the pop-up window.

1. Looping — allows you to keep restarting your animation timeline for as many times as you define or infinitely.

2. Restart on scroll into view — the animation will restart every time the viewer scrolls the page and the ad comes back into view.

3. Parallax scroll — adds depth to your ad by making background and foreground elements move at different speeds as the viewer scrolls. From the drop-down menu select when you want your parallax to start and end.

Learn more about Animation Timeline:

Timed actions

This article explains how to set up Timed Actions — actions triggered at specific times and set up via Animation Timeline.

Migration: Keyframes to Animation Blocks

This article explains when and how to convert keyframes into blocks in the updated Animation Timeline.