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.

Row colors

A row's color tells you what kind of element it is. The icon before the name shows the same thing, and the Layers tab uses the same colors:

The darker part at the start of each swatch is how an entrance looks on a bar. All colors are equally light, so no row stands out more than another and the timeline never competes with your creative.

Timeline animation modes

The shape of a row shows how its element moves:

• No animation (static): an outlined bar with no fill. The element is shown without any entrance or exit motion.
• Auto-animation (preset): a filled bar. Motion follows the creative's motion preset.
• Custom animation: a filled bar with a small dark mark in its top-left corner. The timing was changed by hand and no longer follows the preset. Hover the mark to see this explained.
• Keyframe animation: a filled bar with diamond keyframe markers.

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

Right-click the middle of a row to change its mode:

• Reset to Preset - returns a custom or keyframed element to the creative's motion preset.
• Remove Animation - makes the element static: shown, but without entrance or exit motion.
• Convert to Keyframes - switches the element to keyframe animation. To go back, click Custom in the Animation tab.

Reset to preset and Remove animation are also at the bottom of the Animation panel.

Reading a row

• The darker parts at the start and end of a bar are the entrance and exit. Click one to pick a different entrance or exit preset.
• Shading inside the entrance and exit shows the easing. Darker means faster: an ease-out starts dark and fades as the element settles, an ease-in builds up, and a linear ease is evenly shaded.
• On a keyframed row, a thin arrow runs between two keyframes only when something changes between them. No arrow means the element holds still in that stretch.
• The small arrow left of a keyframed row opens property rows: one per animated property, with its own keyframes. Shading on a property row shows that property's easing, the same way it does in entrances and exits.
• The selected row has a dark outline and a light band across the whole row.

Selecting on the timeline

• Click a bar to select its element, and drag it to move, resize or reorder it. The empty part of a row beside its bar doesn't select anything.
• Click any empty space to clear the selection.
• Drag from empty space to draw a box. If the box touches any keyframe diamond, it selects those keyframes. If it touches none, it selects every element whose bar it touches. What will be selected lights up while you drag.
• Hold Shift while drawing the box to add to the selection. With elements selected it adds elements; with keyframes selected it adds keyframes.

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

Selecting several keyframes

• Shift or Cmd/Ctrl + click a diamond to add it to the selection, or take it out again.
• Drag from empty space across the diamonds to box-select them (see Selecting on the timeline). Hold Shift to add to the current selection.
• Drag any selected diamond to move them all together. Each property keeps its order: a keyframe stops one step short of one that isn't selected.
• Delete removes them, Cmd/Ctrl + C copies them and Cmd/Ctrl + V pastes at the playhead with the spacing kept. Right-click a selected diamond to also set the easing of every segment that starts at a selected keyframe.
• Esc clears the selection.

Custom curves

Pick Custom curve… at the bottom of the panel's ease list, or Edit curve… in the right-click menu of a segment, a property row's segment or a group of selected keyframes.

• Drag the two handles to shape the curve. Hold Shift to snap them to 0.05, or focus one and nudge it with the arrow keys (Shift for bigger steps).
• Type exact values in x1, y1, x2, y2. x stays between 0 and 1; y may go past them to overshoot.
• Start from a standard curve with the presets underneath; the dot runs the curve once a second.
• The canvas follows while you drag. Done or a click outside keeps the curve, Esc puts back the easing from before.

Elastic, bounce and stepped easings can't be drawn as a curve: the editor then starts from a standard curve.

Keyframed elements must keep at least 2 keyframes. A delete that would break that is refused as a whole, and nothing is removed.

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.

Hover to find an element

The canvas, the timeline, and the Layers tab highlight the same element when you point at it in any of them:

• Hover a timeline row to outline its element on the canvas and highlight its layer.
• Hover an element on the canvas to highlight its timeline row and its layer.
• Hover a layer to outline the element on the canvas and highlight its timeline row.

The canvas outline also shows elements that aren't visible at the current playhead position, such as an element before its entrance. The timeline shows one row per top-level element, so hovering a layer inside a group highlights the group's row.

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.