Help / HTML5 Ad Animation Modes: Auto, Custom, and Keyframes

In Foldwrap, animation is edited in two places:

• Timeline for timing, ordering, drag/resize, and context menu actions.
• Animate tab (right panel) for entrance/exit parameters, keyframe values, and mode switch.

Each creative element has its own timeline row, and row color shows which animation mode is active.

Three animation types

1. Auto-animation (presets)

Pastel timeline color. Motion is generated automatically from your selected preset (for example Fade, Swift Slide, Bouncy Rebound) and element timing.

Use this when you need fast output and consistent motion across many ad sizes.

2. Custom animation

Vivid timeline color. This mode starts when you manually change animation parameters (for example start/end timing, duration, appear/disappear values, or drag/resize timeline items).

Use this when one element needs specific timing or motion that differs from preset behavior.

3. Keyframe animation

Vivid timeline color with keyframe markers. Instead of only appear/disappear behavior, motion is controlled by multiple keyframes across time.

Use this when you need precise motion paths, multi-step movement, or advanced transitions.

For timeline controls, read Timeline.

How to switch between modes

• Start with auto-animation by choosing an animation preset for the creative.
• Any manual timing or motion tweak on an item switches it to custom animation.
• Switch to keyframes using either:
  • Keyframe animation toggle in the Animate panel, or
  • timeline right-click menu: Convert to Keyframes.
• In keyframe mode, add frames with Add keyframe (Animate panel), Add Keyframe at Playhead, or Add Keyframe Here from timeline context menus.
• Use Convert to Simple Animation to leave keyframe mode but keep editable simple animation values.
• Use Reset animation to return the selected item to preset-driven behavior.

Keyframe basics

• Add keyframes from the Animate panel or timeline context menu.
• Drag keyframes to retime motion.
• Keyframes stay in chronological order and snap in small time steps for precise edits.
• A keyframed item must keep at least 2 keyframes.
• Best for non-linear movement, staged reveals, CTA timing polish, and advanced transitions.

Copy and paste animation

You can copy animation from one element and paste it to another element, including across variants in the same session.

Options:

1. Paste Animation (keep timing) - applies source motion while preserving target timing.
2. Paste Entrance Only - applies only entrance behavior.
3. Paste Exit Only - applies only exit behavior.
4. Paste Animation (full) - applies full copied animation.

This is useful when you need consistent motion across many banners while keeping each layout structure intact.

Copy motion from another size

Copy/paste above moves one element's animation. When a whole size needs the motion you already approved on another size, use Copy motion from… instead — it matches the layers between the two sizes and copies the animation for all of them at once.

How to run it

1. Open the size you want to change. The copy always writes into the size you are looking at, never into the others.
2. Open the variant menu, either way:
   • click the variant name in the breadcrumb at the top of the editor, or
   • right-click the variant in the variants sidebar.
3. Choose Copy motion from….
4. Pick the size to copy from.
5. Leave all three boxes ticked to copy everything, or untick what should stay as it is:
   • Per-element motion — entrances, exits and keyframes.
   • Per-element timing — when each element appears and how long it stays.
   • Creative-level — the animation preset, frame delay and loop count of the whole banner.
6. Press Apply.

Layout is never touched. Positions, sizes and text stay exactly as they are in the size you applied to — only motion and timing are copied. Like any other edit, it can be undone with Ctrl/Cmd+Z, and the review label in the timeline has an undo button of its own.

Read the result before you ship

After the copy, every timeline row shows what happened to it, and the labels stay until you change something else:

Hover a marker to see the element names and the reason each one was or was not matched. Click it to clear the review.

Do not skip this step on client work. An amber triangle means part of that group is still holding its old animation.

Improve your chances of a clean match

Foldwrap pairs elements by what they are, not by where they sit. A few habits make almost every element match:

• Build sizes from one master. Sizes made with Duplicate, with AI resize, or from spreadsheet data keep their connection to the original and match nearly perfectly. Sizes built separately from scratch have the least in common.
• Keep layer names the same across sizes. CTA in one size and CTA button in another are two different elements as far as matching is concerned. Renaming in Figma before import, or in Foldwrap afterwards, both work — just keep them consistent.
• Keep the same grouping. An element inside a group in one size and loose in another is harder to pair. Matching follows the group structure.
• Give duplicates distinct names. Three elements called Rectangle 12 in the same group can only be told apart by their order. If that order differs between sizes, they may be left unmatched. star-left, star-mid, star-right always match.
• Reuse the same images. An image placed from the same asset in both sizes is recognised even if it was renamed.
• Lock what you tuned by hand. A locked element is skipped and reported as skipped, so a hand-timed hero animation survives a copy onto the rest of the size.

When two elements are equally plausible, Foldwrap deliberately leaves the element alone and flags the row for review rather than guessing. Rename one of them and run it again — that is usually the whole fix.

When to use it

• A size was adapted by hand and now needs the campaign's approved motion.
• The client changed the timing after the set was already built — fix one size, apply to the rest.
• Sizes came from separate Figma frames and have drifted apart.
• A late format was added to an otherwise finished campaign.

Recommended workflow

1. Start with an auto-animation preset to generate a fast first draft.
2. Adjust only the elements that need custom timing.
3. Use keyframes for hero elements, CTA moments, and complex transitions.
4. Reuse animation with copy/paste for single elements, or Copy motion from… to bring a whole size in line with an approved one.

This workflow helps freelancers close revisions faster and helps agencies keep output quality consistent at scale.