Help / Timeline Guide for HTML5 Banner Animation

The timeline is the main place to edit animation timing in Foldwrap. Each element in your creative appears as an interactive timeline row.

Timeline animation modes

Timeline rows can be in three animation modes:

• Auto-animation (preset): pastel color
• Custom animation: vivid color
• Keyframe animation: vivid color with keyframe markers

If you move or resize a timeline item manually, it switches to custom animation for that element.

You can switch an item to keyframes from timeline right-click menu: Convert to Keyframes.

To return the element to preset behavior, click Reset animation in animation controls.

Keyframes

For advanced motion control, use keyframes.

With keyframes, you can animate position, scale, opacity, and rotation at multiple points in time and fine-tune easing between points.

From timeline context menus, you can:

• add keyframes (Add Keyframe at Playhead, Add Keyframe Here)
• retime by dragging keyframe markers
• set easing per segment
• convert back with Convert to Simple Animation

Keyframed elements must keep at least 2 keyframes.

Learn more in Animation modes and keyframes.

Copy and paste animation

If you need consistent motion across multiple elements, right-click a timeline item, copy its animation, then paste it to another item.

When animation is copied, timeline paste options include:

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.

You can also paste animation across variants in the same editor session.

This workflow helps freelancers speed up revisions and helps agencies keep motion patterns consistent across campaign sizes.