---
url: "/bannerify/animation/ai-animation-timelines.md"
description: "Copy a Bannerify timeline prompt into your preferred AI assistant, validate its JSON plan, and safely apply the recommended animations and timings."
---

# Creating AI animation timelines

> Copy a Bannerify timeline prompt into your preferred AI assistant, validate its JSON plan, and safely apply the recommended animations and timings.

Bannerify can turn the layers and current timings from one banner into a structured prompt for ChatGPT, Claude, Gemini, or another AI assistant. Paste the returned JSON into Bannerify to validate and review the proposed entry, exit, and hover animations before applying anything.

Bannerify does not contact an AI service or change the timeline when you copy the prompt. You choose where to paste it, and the timeline is only updated after its JSON response passes validation and you click **Apply AI Timeline**.

## Create an AI timeline

1. Load your banner frames or sections into Bannerify.
2. Click the **Create AI Animation Timeline** prompt icon in the header of the banner you want to animate.
3. Describe the direction you want. Include the intended mood, visual hierarchy, important layer order, or elements that should remain subtle.
4. Click **Copy AI Prompt**.
5. Paste the prompt into your preferred AI assistant and send it without removing the included timeline data or rules.
6. Copy the JSON object from the AI response.
7. Return to Bannerify and paste the response into **Paste and validate the JSON response**. Bannerify automatically validates pasted JSON, or you can click **Validate JSON**.
8. Review every proposed change, including the previous and recommended animation and timing.
9. Click **Apply AI Timeline**.

The preview updates immediately and Bannerify saves the new animation settings to the Figma layers.

> **Tip:** For more useful results, describe the viewing sequence instead of naming animation presets. For example: _Introduce the headline first, bring the product in from the right, then reveal the CTA. Keep the motion restrained and add a subtle CTA hover._ The copied prompt already supplies the supported Bannerify animation names.

## Review and undo the result

The review panel shows only the tracks that will change. It compares the current entry, exit, and hover settings with the validated recommendation for each affected layer.

Applying an AI timeline creates one Bannerify history step, even when several layers change. Use the **Undo** button or Command + Z on macOS / Ctrl + Z on Windows to restore the complete previous timeline. You can then redo the same AI plan or generate a fresh one. See [Undoing and redoing timeline changes](/bannerify/animation/undo-redo) for all shortcuts and history behavior.

## What Bannerify includes in the prompt

Each copied prompt contains the information the AI needs to create a valid plan:

- A temporary reference such as `L1` for every editable timeline layer
- Layer names, types, stack order, and bounds
- The banner dimensions and timeline length
- Current entry, exit, and hover settings
- The allowed timing window for each layer or section scene
- Split Text and SVG Draw compatibility
- A catalog of supported Bannerify animation IDs, including saved custom animations that can be used for entry or exit tracks
- Your animation direction

Bannerify does not include raw Figma banner or layer IDs, exported image data, SVG markup, or other layer asset bytes. The copied prompt does include layer names and layout/timeline metadata, so review it before sharing designs that contain confidential naming or structure.

## How the JSON is validated

Bannerify validates the complete response before changing any layer. It checks that:

- The response uses the current Bannerify timeline schema and matches the copied prompt
- Every supplied layer reference appears exactly once
- No unknown layer references or animation IDs were invented
- Split Text and SVG Draw animations are only used on compatible layers
- Entry and exit animations fit inside the layer's allowed timeline or scene window
- Entry and exit ranges do not overlap
- Durations are at least 0.1 seconds
- Timing values can be normalized to Bannerify's 0.1-second timeline increments

If the timeline, layer settings, custom animation catalog, or scene timing changes after you copy a prompt, Bannerify rejects the old response. Click **Copy Fresh Prompt** and ask the AI again so its plan is based on the current timeline.

## JSON response format

The copied prompt asks the AI to return a single JSON object in this format:

```json
{
  "schemaVersion": "bannerify.timeline-plan.v1",
  "snapshotId": "ai-example-snapshot",
  "timelineSeconds": 5,
  "layers": [
    {
      "layerRef": "L1",
      "entry": {
        "animationId": "fade-in-bottom",
        "startSeconds": 0.2,
        "durationSeconds": 0.6,
        "loop": false
      },
      "exit": {
        "animationId": "fade-out",
        "startSeconds": 4.3,
        "durationSeconds": 0.5,
        "loop": false
      },
      "hover": null
    }
  ]
}
```

Each `entry`, `exit`, or `hover` value can be:

- An animation object to replace that track
- `null` to remove its animation
- `"keep"` to leave its current value unchanged

Do not edit the `schemaVersion`, `snapshotId`, `timelineSeconds`, layer references, or animation IDs. If an AI wraps the response in a single `json` code block, Bannerify can still read it.

## Working with section scenes and special animations

For banners loaded from Figma sections, the prompt contains the current timing window for each scene. The AI can change layer timings inside that window, but it cannot move a layer into another scene. Adjust scene timing in Bannerify first, then copy a fresh prompt if you want the AI to use the new window.

Split Text animations are only available when the text layer is eligible. SVG Draw animations are only available for compatible SVG layers. Saved custom keyframe animations are included as entry and exit choices. Existing animations that are not in the supplied AI catalog can still be preserved by returning `"keep"` for that track.

Layers beginning with `locked-` are intentionally omitted. If a nested layer is missing, [expand it into the Bannerify timeline](/bannerify/design/nested), refresh the banner, and copy a fresh prompt.

## Troubleshooting

### The response says the timeline changed

The prompt is no longer based on the current banner state. Click **Copy Fresh Prompt**, replace the previous prompt in your AI assistant, and use its new JSON response.

### An animation ID is not in the catalog

Ask the AI to use only the exact `animationCatalog` IDs supplied in the copied prompt. Do not substitute a display name or invent a new animation name.

### A layer is missing or duplicated

The AI response must include every supplied `layerRef` exactly once, even when every track for that layer is set to `"keep"`.

### The entry and exit animations overlap

Ask the AI to finish the entry before the exit starts. Both ranges must also remain inside that layer's `timeWindowSeconds`.

### The JSON is valid but shows no changes

The response preserved the current values or recommended the settings already on the timeline. Adjust your direction and copy a fresh prompt if you want a different result.

> **Warning:** Always preview the complete banner before exporting. JSON validation confirms that the plan is structurally safe and compatible with the current timeline, but the creative result still needs a visual review.