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.

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 to keep motion consistent across sizes.

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