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

In Foldwrap, all animation edits happen in the timeline. Each creative element has its own 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.
• Right-click a timeline item and add keyframes to switch into keyframe workflow.
• To return an item from custom or keyframes to preset behavior, use Reset animation in animation controls.

Keyframe basics

• Add keyframes from the timeline context menu.
• Drag keyframes to retime motion.
• Keyframes stay in chronological order and snap in small time steps for precise edits.
• 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 - applies the full copied animation.
2. Paste Appear and Disappear - keeps target start/end placement and applies only in/out behavior.

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.