Animation Timeline

The Animation Timeline lets you animate properties of elements in your creative—such as position, size, opacity, and rotation—over time. This page 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.

Note: Pre-made and Saved Groups cannot be edited directly. However, you can convert them into a Custom Group to unlock full editing capabilities.

What is an Animation Block?

An animation block defines the transition of a single property of an element (e.g., X 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.

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

• Position: Where on the timeline the animation begins.

Example: A Position block could move an element from X: 0 to X: 200 over 2 seconds, starting at 1 second into the timeline.

---

How to Use the Animation Timeline:

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

1. 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.

📸 Visual Suggestion: Show an image of a selected element with the film icon activated and the element appearing in the timeline.

---

2. Working with Pre-made Animations (PMA)

Adding PMAs

• Click the “+” button in the timeline.

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

• Move (adjust when it starts)

• Resize (change duration) - All part of the animation will adjust proportionally (individual blocks will all get longer or shorter proportionally)

• Copy–Paste functionality is available

🔒 Note: You cannot change the values of individual blocks within a Pre-made group.

👉 Learn how to Customize a Pre-made Animation

---

3. Creating Custom Animations (CA)

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. There are two primary ways to add custom animations:

a. Using the “+” Button

1. Click the + button next to the timeline row of 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 (needle) 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.

💡 Tip: Move the playhead to your desired start time before adding the block.

📸 Visual Suggestion: Show the + button highlighted, the property dropdown open, and a new animation block added to the timeline.

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.

This approach is ideal for creating “animate-in” effects — where the element transitions from an altered state into its final designed appearance.

📸 Visual Suggestion: Use an animated GIF or step-by-step images showing a user dragging an element on canvas, with the resulting block appearing on the timeline.

c. Double-clicking Timeline Rows

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

📸 Visual Suggestion: Animated GIF showing dragging, resizing, and timeline block creation.

---

Changing Start and End Values

Option 1: Top Bar Inputs

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

Option 2: On the Canvas

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

  • Selecting the block always moves needle to the start position

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

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

📸 Visual Suggestion: Split image showing the element at start and end states.

---

4. Manipulating Animation Blocks

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

• Resize: Drag the block edges to change duration.

  • Custom Groups: Resizing a group block will proportionally resize all child property blocks.

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

📸 Visual Suggestion: Show resizing and moving blocks, plus a grouped block with multiple properties (e.g., Position + Opacity).

---

5. 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

• Add via the + button.

• Move, resize, or copy–paste.

• Editing individual values requires customizing the saved animation.

👉 Learn how to Customize a Saved Animation

📸 Visual Suggestion: Save animation dialog and timeline with saved animation applied.

---

6. Controlling Time

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

Moving the Needle

• Drag the needle to scrub through.

• Type a time to jump directly.

• Click on the timeline to move the needle.

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

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

Timing Animations

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

  • You click the + button

  • You make on-canvas changes

  • You double-click a row in the timeline

• Pro-tip [reverse snap]: if you want to move or resize your animation block to certain time:

  • Select that block

  • Type in exact seconds to position the needle

  • Move or resize the block and it will snap to the needle

Adjusting Duration

• Drag a block’s edges to set how long the animation runs.

📸 Visual Suggestion: Show needle movement and block insertion behavior.

---

7. Customize Pre-made or Saved Animations

When you click Customize on a Pre-made or Saved animation:

• It converts to a Custom animation (essentially “ungrouping”).

• You can adjust individual values and properties.

• Save your changes as a new animation if needed.

• Delete the old version if no longer needed.

---

8. 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.

📸 Visual Suggestion: Highlight where users can view the total animation length on the timeline.

---

Zooming 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 buttons to zoom in or out. Each click adjusts the timeline scale by roughly 1 second.

• Scrubber (if available): Drag to zoom more precisely.

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

📸 Visual Suggestion: Show before-and-after images of zooming in/out and using the reset button.

---

Scrolling and Navigation

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

---

Optional Tip: Collapsing/Expanding Rows

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

---

9. Working with Other Creative Sizes

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

(insert image here)

If you need your animation to work 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. Preview 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. Preview the animation in the selected sizes to ensure it looks as expected, and adjust as needed.

---

10. Advanced Animation Timeline settings

Advanced settings for animation timeline 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.

(insert image here)

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 — restarts animation each time when the viewer scrolls the page and creative gets back into view.

3. Parallax scroll — creates an effect for your creative as if it’s being scrolled together with the page, and adds depth to an ad. Enable the option and select one of the options from the drop-down:

   1. Starts when full creative is in view, ends when first px is off screen

   2. Starts when first px is in view, ends when first px is off screen

   3. Starts when half of creative is in view, ends when half of creative is off screen

   4. Starts when full creative in view, ends when full creative is off screen

   5. Starts when first px is in view, ends when full creative is off screen

   6. Starts when half creative is in view, ends when first px is off screen