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.
The Animation Timeline with Animation Blocks 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
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.
This animation timeline contains pre-made and saved animations, as well as some regular animation blocks 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.
Animation block for Opacity change with Linear easing
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:
Select an element from the list (e.g., text, image, shape).
The selected element is now available in the Animation Timeline.
Adding elements to the Animation Timeline Removing Elements from the timeline
To remove an element from the animation timeline:
Click the filmstrip icon next to the element’s name in the Element List.
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.
If you want to remove the element from other sizes as well, select additional sizes from the list.
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.
Choosing a pre made animation 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.
Adjusting a pre made animation
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:
Click the + button next to the element you want to animate.
Select the property you wish to animate — such as Position, Size, Opacity, or Rotation.
A new animation block will appear at the current playhead position with a default duration of 1 second (this can be adjusted later).
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.
Creating a custom animation 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.
Dragging an element on the canvas to create an animation c. Double-clicking Timeline Rows
Double-click a settings row (e.g., Position) in the timeline to add an additional block.
Double clikcking on a row to create a new block at the playhead
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
Playhead at start of animation block Playhead at end of animation block
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.
Moving & resizing animation blocks
4. Saved Animations
Save custom animations for reuse:
Select an entire Custom group or several Animation blocks you want to save.
Click Save, name your animation, and confirm.
Step 1- Select group you wish to save and click 'Save' Give your new animation a name The animation you saved is now available in the list of saved animations 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.
Selecting and customizing a pre made animation
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.)
Moving the playhead by dragging, typing and clicking on the timeline. Timing Animations
New blocks are inserted at the current playhead position when:
You make on-canvas changes
You double-click a row in the timeline
Adding new animation blocks at the playhead Using a Reverse Snap to adjust an animation block 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.
How to view the total duration of the animation
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.
Overview vs detailed view of animation timeline
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.
Zooming & scrolling the animation timeline
8. Working with Other Creative Sizes
Animations you create are applied only to the currently selected size.
Animation only applied to the selected size (shown in red box) 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.
Click the “Copy animation from size to size” button.
In the pop-up window, select the target sizes and confirm your selection.
Play the animation in the selected sizes to ensure it looks as expected, and adjust as needed.
Copy animation from size to size button Option 2: Copy Animations for Specific Elements
This function lets you copy animations for specific elements only.
Select the element(s) whose animations you want to copy.
Click the “Copy element animation from size to other sizes” button.
In the pop-up window, select the target sizes and confirm your selection.
Play the animation in the selected sizes to ensure it looks as expected, and adjust as needed.
Copy animation for specific elements
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.
Animation Timeline Settings button Looping — allows you to keep restarting your animation timeline for as many times as you define or infinitely.
Restart on scroll into view — the animation will restart every time the viewer scrolls the page and the ad comes back into view.
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.
Animation Settings Dialogue box
Learn more about Animation Timeline:
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.
