# Migration: Keyframes to Animation Blocks

## Overview

If you're working with older creatives that use **keyframe-based animation**, here’s what you need to know:

* ✅ **All keyframe animations will still work as before**. If you don’t need to make any changes, you can keep using them without converting.
  * &#x20;You can continue to select, edit values, or move individual keyframes as needed.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfDCiEgW5yJEAu3nsAFPnMBWTpn_UAlb_Z9Ehh5f-M_8bd7jUni-7SUL4bFzQVeSmTFf57GaNgmsvHZYpbq7a-yVRp3yJik9YZKgmAF0YJl1D24q0ZkZOR3XzI31N7t5dJ7QDt6RQ?key=fLFEbu5gwcUoTIS9-KjAGvBE" alt=""><figcaption><p>Using Keyframe and Blocks concurrently</p></figcaption></figure>

* ➕ If you plan to **add new animations**, we recommend converting your keyframes to **blocks** for full compatibility with the new system.
  * **All newly created animations** will be automatically added as blocks.\ <br>
* ⚠️ In cases where conversion is required, a **pop-up** will notify you and guide you through the process (shown below):

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfXr_mKvJXVOqM-aiSwpqO4D7F4bqY7CJbtf1f3a3aZjSmQq-EwNd6XSEbFzopEsb1GehyqPI2wXSWIIt9YGAsnYtPbE-eEwOJX9rvwtAuuNDy-KJi8qYGAS5JtPR57xVvLQE94CQ?key=fLFEbu5gwcUoTIS9-KjAGvBE" alt="" width="375"><figcaption><p>Conversion pop up</p></figcaption></figure>

***

## How to Convert Keyframes to Blocks

You can manually select:

1. Keyframes for a specific property (e.g., position, opacity),
2. All keyframes for a particular element,
3. Or all keyframes in the animation.

Then:

* Click the “Convert to Blocks” button in the Animation Timeline (AT) top bar.
* Once converted, the keyframes will appear as animation blocks in the timeline.

{% hint style="warning" %}
&#x20;**Important:** Always play your animation after conversion. If the result isn’t as expected, you can undo the conversion. We've implemented comprehensive conversion rules to preserve the animation as closely as possible, but minor discrepancies may occasionally occur.
{% endhint %}

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXc05JMLO6szXq7NCw4hO4o51sCDgzc7YV1CO38y8_zRDDrtVAz0Napp4BuOBTS0IT60f9RE7n2Yd3-YJ8-EyMTXyVq_vg1IhrmpW7aYw_NSQfdGkQ65iP1NcYRhhwWEAN-hVXMO0A?key=fLFEbu5gwcUoTIS9-KjAGvBE" alt=""><figcaption><p>Converting Keyframes to Blocks</p></figcaption></figure>

***

### &#x20;What Happens During Conversion

* Each keyframe will be treated as either the **start** or **end** of a block.

* Whenever there’s a **transition between two values**, a block will be created to represent that change.

* All **easing functions** applied to keyframes will be preserved and applied to the corresponding blocks.

* Keyframes with **no value change** (i.e., value = original value) will be **discarded** during conversion, as they do not contribute to the animation.

### Other Creative Sizes&#x20;

Keyframe-to-block conversions are applied **only to the currently selected size** of your creative.\
If you have animations in other sizes:

* Existing keyframe animations **will continue to work** as expected in all sizes.<br>
* You **don’t need to convert** keyframes **in every size** unless you plan to modify the animation in those sizes.<br>
* If you want to **edit animations** in a different size, you'll need to **select that size** and convert the keyframes there.<br>

***

## Summary

| Feature                       | Behaviour                                                                              |
| ----------------------------- | -------------------------------------------------------------------------------------- |
| Reuse existing keyframes      | No conversion required                                                                 |
| Edit or move keyframes        | Fully supported                                                                        |
| Add new animations            | Will use the new block-based system                                                    |
| Manual conversion             | Available for specific properties, elements, or the whole animation                    |
| Automatic conversion (forced) | Only occurs when required — you’ll be prompted via pop-up                              |
| Post-conversion validation    | Always play and use Undo if needed                                                     |
| Animation in multiple sizes   | Conversions are **per size** — only convert if you plan to edit animation in that size |

<br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.responsiveads.com/creating-ads/designing-your-ad-in-the-fluid-ad-creator/animation-timeline/migration-keyframes-to-animation-blocks.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
