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.

The same right-click menu also has Duplicate right below Copy Animation, and Entrance / Exit submenus for quickly swapping in a different preset without leaving the timeline.

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

Lock elements

Lock an element from the timeline when you want it out of the way — a finished background, an approved logo, anything you don't want to select or move by accident while you work on the rest of the creative.

• Right-click a timeline row and choose Lock. With several elements selected, this locks all of them.
• A locked row shows a small padlock before its bar. Click the padlock, or right-click the row and choose Unlock, to unlock it again.
• Ctrl/Cmd + Shift + L locks the current selection.
• The Layers tab in the editor sidebar (Alt/Option + 2) has the same padlock and right-click Lock, including for layers nested inside groups.

A locked element can't be selected, dragged, or resized on the canvas, and its timeline row can't be dragged, resized, or retimed either — the padlock icon and the row's right-click menu are the only way to interact with it.

Keyboard shortcuts

Select one or more timeline items, position the playhead, then use these to adjust timing without reaching for the mouse:

[ and ] never push an element before 0:00 - if the move would do that, the element is clamped to start at 0:00 and keeps its full duration instead.

With several elements selected, [ and ] keep every element's timing relative to the others: they all shift by the same amount, anchored on the last element you selected.

Alt + [ and Alt + ] only work on auto-animation and custom animation items - a keyframed item has no single duration to trim.