You can adjust the speed and delay of your animations by clicking down on the left/right edges of the timeline bar for your layer, then holding and dragging with your mouse to adjust the length of your animation and its start/end point.

When a bar is too narrow to grab comfortably, hover over it or focus it with the keyboard to reveal circular left and right handles and a small move grip below the bar when the bar is 28px wide or narrower. Drag a dot to adjust that edge, or drag the lower grip to move the animation. The controls have larger grab areas and stay inside the timeline column. Hover-duration bars show only the right handle. These controls use the same snapping, keyboard shortcuts and undo history as the normal bar.

You can shift the location of your animation on the timeline by clicking down on the middle of the timeline bar for your layer, then holding and dragging with your mouse; moving it either left or right to change where it is placed in your timeline.

Use your keyboard to input precise timing numbers. If you'd prefer not to use the timing bar, you can also set your speed and delay values by clicking the second value in your timeline layer, and entering a new number with your keyboard (for example, 1.5) to set the amount of seconds.

Adjust timings on multiple layers

Select two or more layers, then drag the entry, exit, or hover timing bar on one of the selected layers. Bannerify applies the same movement to the matching active timing track on the other selected layers while preserving their relative offsets.

If the earliest or latest selected timing reaches the edge of the timeline, Bannerify stops the group at that boundary. Locked layers, inactive timing tracks, and entry timings controlled by mirrored Figma Motion animations are left unchanged.

Each completed drag is saved as one undoable history step.

Zoom and scroll the timeline

Use the + and − buttons or the zoom slider above the layer list to see more or less detail. The percentage beside the slider shows the current zoom level. Click Fit to return to 100% and show the entire timeline again. Zooming changes the view without changing animation timings or the exported duration.

Pinch in or out with two fingers on a trackpad while the pointer is over the ruler or timing tracks. The time under your pointer stays anchored as you zoom, within the 100–1000% zoom range. Pinching changes only the view and is ignored while you are dragging a timing bar. You can also use Ctrl while scrolling with a mouse wheel.

When zoomed in, click and hold the rounded blue scrollbar handle directly below the ruler, then drag it left or right to move along the timeline. The handle highlights on hover and while pressed. You can also scroll horizontally with a trackpad, or hold Shift while scrolling over a timing track. The ruler and timing bars stay aligned across banners.

Entrance and exit bars show the time spent playing each animation. The end of an entrance bar marks when the entrance finishes; the layer can remain visible afterward. Hover bars control hover duration, with their start fixed.

Adjust bars with the keyboard

Focus a bar or one of its edge handles, then use the arrow keys to move it in 0.1-second steps. Hold Shift for 1-second steps. Moving a bar preserves its duration; moving an edge changes its start or end.

Press Escape during a drag to restore the timings from before the drag, including any selected layers moving with it. Scene bars move the scene's editable animations together while preserving their individual durations.

Snap and organise your timeline

Open Timeline Settings → Timeline tools and enable Snap to align dragged entrance/exit bars, scene bars and their editable edges with the playhead, markers, work-area boundaries and nearby animation edges. Hold Alt (or Option on macOS) while dragging to bypass snapping. A guide shows the alignment. Snapping uses the current zoom level, so zoom in for finer adjustments.

In the same tab, use the layer filter to show All layers, Selected layers or Animated layers. Filtering only changes the timeline list; hidden rows still play and export normally. In the same settings panel, Collapse groups folds the scene layer lists, and Expand groups opens them again. Select layers and click Zoom to selection to frame their active timing ranges, up to the 1000% zoom limit.

Open Timeline Settings → Timeline tools to add a named marker at the playhead. Enter a Marker name and click Add at playhead. Click a marker diamond on the ruler, or its time in the panel, to seek there. You can rename or remove markers in the panel. Markers are kept for the current editing session and do not affect exported animations.

Save and reuse a motion sequence

A motion sequence stores the coordinated entrance, exit and hover animations of several layers. It can be applied to differently named layers using explicit mappings.

1. Open Timeline Settings → Motion sequences and choose a Source banner.
2. Optionally enable Selected source layers only to use just the selected layers within that banner.
3. Enter a sequence name and click Save sequence. Saved sequences are kept in your Bannerify settings; the library holds up to 50 sequences. Saving selects the new sequence and refreshes the suggested target mappings, so review them again before applying.
4. Choose the saved sequence and select one or more target banners. A saved sequence supplies the animations instead of the source banner; Selected source layers only applies when capturing or applying directly from the source. You can also apply directly from the source banner without saving it first.
5. Review the suggested layer mappings. Unique matching names are filled in automatically; duplicate or unmatched names require you to choose a target layer. Uncheck a mapping or choose Skip / choose a layer to leave that target unchanged.
6. Optionally enter a Offset (seconds) in seconds to shift entrance and exit timings. Hover duration is unchanged by the offset.
7. The review panel explains any missing source, target or layer mapping. If the mapped tracks already match, there is nothing to apply. Review the before/after timings and click Apply motion sequence. The whole application is one undoable edit. Use Undo, Redo, or the History panel to return to another step.

Locked and non-renderable layers are excluded. Figma Motion tracks remain tied to their original nodes and are not copied or overwritten. Text-specific animations require text layers. Tracks that would extend outside the timeline are skipped and reported in the preview; Bannerify does not silently shorten them. Existing inactive tracks are left unchanged unless the sequence explicitly supplies an animation for that track.

To remove a saved sequence, select it under Saved Sequence, then click the trash icon. Removing a library entry does not remove animations already applied to your banners.

Sequences reuse animation definitions already available in Bannerify, including your existing custom-animation library. Missing custom animations and incompatible tracks are reported and skipped. Draw animations require an SVG layer, and Split Text requires an eligible text layer, matching the animation picker. Timing-only sync keeps the target animation and does not apply these source-animation restrictions. Sequences do not package artwork or custom-animation definitions for transfer to another user's installation.

Synchronise timings across banner sizes

Use Timeline Settings → Sync timings to copy timing ranges from a source banner to corresponding layers in other loaded banners.

1. Choose the source banner and, optionally, restrict it to selected source layers.
2. Select the target banners and review each layer mapping.
3. Uncheck mappings that should retain their current timings. Choose explicit targets for ambiguous or unmatched layer names.
4. Review the before/after timing ranges, then click Apply timing sync.

Timing sync preserves each target's animation choices, loop settings and other layer settings. Inactive target tracks, locked layers and Figma Motion tracks are skipped. Each apply is one undoable edit available in the History panel. This is a one-time copy: later source edits do not automatically change the targets. Apply again when you want to synchronise another update.