Banner Studio

Animation & Timeline

Select artwork and edit its entry, motion, hold and exit blocks directly on the timeline.

01

Slides and Transitions

Manage a design sequence from the Slides sidebar and the thumbnail strip above the timeline. Select a slide, change its name or duration, add a blank slide, duplicate its artwork, drag to reorder, or use keyboard-accessible move actions. Deletion asks for confirmation and every slide edit supports undo and redo. Duration changes retime the slide’s keyframes and motion paths and move later slides together. Choose a cut or a fade through the background between slides, and set the full sequence to play once, a set number of times or forever. Slide changes respect All layouts and Single edit; incompatible layout sequences are held for individual editing. Objects can belong to one slide or span all slides. PNG and JPG exports let you choose a slide, while animated formats retain the full sequence. Supported TheBrief imports preserve explicit slide metadata, while older imports expose only unambiguous hard cuts. Existing overlapping scenes stay together until their structure can be established.

02

Keyframe Timeline

A full-width timeline sits below the canvas with layer rows, a time ruler, and a shared playhead. Selecting artwork highlights its label and full timeline row, bringing the selected row into view. Coloured blocks show entry, continuing motion, holds and exit timing. Imported blocks identify the changing properties with labels such as Fade in, Move left, Scale down or Rotate, combining labels when several properties change. Named native presets retain their names. Click a block to open its floating editor at the relevant property and time. Search presets, adjust native duration and easing, or edit an imported keyframe’s property, time and value in Build. Audio clips expose volume, mute and loop controls. The animation picker previews only the selected layer and block, with surrounding artwork held still. It stops at that block’s end and returns to the editing frame. Open details continues in the sidebar. Add a keyframe at the playhead, or double-click a property track at any time. New keyframes capture the rendered value and remain draggable. Selecting a diamond opens its animation details; Delete removes the keyframe while keeping the layer. Moving or stretching the full presence bar carries the imported keyframes and motion-path timing with it. Scrub the ruler to preview the result.

03

Entry, Middle & Exit Animations

Choose an entrance or exit preset from the picker attached to its timeline clip. Imported motion stays intact until you explicitly replace it; Undo restores the previous keyframes and motion path. The same settings appear in the Animation inspector. Drag a coloured animation block to move it, or use the handles at either end to change its duration. Keyboard arrows adjust a handle by 0.05 seconds. Add Blink, Float, Vibrate or Pulse in a hold interval; these middle animations become named, editable keyframe blocks while retaining the entrance and exit. Each timing gesture supports undo, and the native preview and exported artwork use the same block timing.

04

Easing Library

Select from 30+ easing functions — linear, ease-in, ease-out, ease-in-out, plus GSAP-specific curves like back, elastic, bounce, and power curves (power1 through power4). Preview each curve visually before applying. The right easing choice transforms a mechanical-feeling animation into one that feels natural and polished, critical for ad creative that needs to catch attention in the first half-second.

05

PlayAll Modal

Preview all formats simultaneously in a single modal. Each artboard animates in sync so you can verify that your 300x250, 728x90, and 160x600 all look correct before exporting. Pause, rewind, and step frame-by-frame. This eliminates the tedious process of previewing each format individually and catching timing mismatches late in production.

Ready to see it in action?

Get Started