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.

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

Example: An Opacity block would fade an element in from Opacity: 0% to Opacity: 100% over 1.5 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

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.

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

---

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

💡 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., position, size, 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.

Tip: adjust the duration of all the blocks together by resizing the Custom group (this will proportionally resize all animation 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.

Note: Your selection is now saved and you can find it in the list of Saved animations under the “+” button.

Using Saved Animations

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

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

---

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

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 an animation block’s or group’s edge to set how long the animation runs.

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

---

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

---

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

• Slider: Drag to zoom more precisely.

• Reset Zoom: Click this button 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