An HTML clip puts a web page on the Video Editor timeline as a layer. Whatever the page animates — CSS animations and transitions, the Web Animations API, GSAP and other script animation, canvas drawing, SVG animation, even videos inside the page — plays on the clip’s own clock, frame by frame. Everything else in the editor works on it too: transform, keyframes, effects, masks, blend modes and transitions.
Use HTML clips for anything that is easier to build as a web page than out of layers: an animated UI screen, a data card, a title an agent wrote for you, a GL Motion library scene or a whole GL Motion film.
Add an HTML clip
There are four ways to get a page onto the timeline.
- From an HTML card on the canvas — open the card’s More options (⋯) menu in its toolbar and choose Add to Video Editor. The clip goes into the board’s current video project, after the clips already on the first video channel, at the card’s render size and length (a card without those settings gets the project’s frame size and 5 seconds). On a shared (collaborative) board the entry isn’t offered for HTML cards.
- From the Media panel — drag an
.htmlfile from the editor’s Media page onto the timeline, like any other media file. - By pasting a page — copy the code of a complete page (it must start with
<!DOCTYPE html>or<html>) and paste it into the editor with ⌘V / Ctrl+V. The app saves it as a new HTML card on your board, titled Pasted page, and adds the clip at the playhead. - From the Presets tab — click a scene in the GL Motion library and choose HTML clip. See Sequences and Presets.
A GL Motion film exported to the Video Editor arrives with every scene as an HTML clip and the voice-over and sound effects on their own tracks — see Rendering and Exports.
The clip stays linked to its page
An HTML clip does not copy the page: it links the .html file on your board. Edit the page and every clip that uses it updates.
- Double-click the clip on the timeline, or click Edit HTML in the inspector, to open the visual HTML editor over the Video Editor. Close it and the clip picks up your changes.
- Edits made on the canvas, or by an agent changing the file, reach the clip too.
Edit HTML needs an HTML card on the board that owns the file. A page without a card — a GL Motion library scene, for example — shows a notice instead.
Live playback in the editor
In the desktop app the page runs inside the editor and is drawn into the layer frame by frame. Edits to the page show at once, a new clip plays straight away, and scrubbing, playing and stepping frame by frame land on the exact frame.
A page can only run forwards, so going back in time reloads it and steps it forward to the playhead. While you drag the playhead backwards the frame on screen holds, and the page catches up when the playhead rests. A very heavy page therefore scrubs backwards more slowly than forwards.
Two uses of the same clip — on two tracks, or one inside a sequence — each run their own copy of the page.
In the web version and on iPad, the editor cannot draw pages live. There an HTML clip plays a rendered video of its page instead. While that video renders, the clip on the timeline shows a Processing overlay with the progress, and it plays as soon as the render lands.
The HTML section
Select an HTML clip and open the Layer tab of the inspector. The HTML section shows:
| Control | What it does |
|---|---|
| Width / Height | The page’s canvas: the size the HTML is laid out and drawn at, 16–7680 px. It starts at the card’s render size, or the project’s frame size. |
| Mode note | Live — the page runs in the editor, so edits show at once. in the desktop app. Plays its render. where pages can’t run live, with the reason when a page failed to run live on the desktop. |
| Status | The state of the page’s rendered video, for example Rendered — up to date with the page or Not rendered — it plays live here. While a render runs, its stage and percentage show over a progress bar with Cancel. |
| Edit HTML | Opens the page in the visual HTML editor. |
| Render again | Makes a fresh render of the page and reloads the live page. Use it after you change an image, a font or a script that the page loads: those files are not part of the page itself, so the editor can’t see that they changed. |
On the timeline, an HTML clip is marked with a code glyph. A MISSING badge means the HTML file is no longer on the board; FAILED means its render failed. Where the clip plays a rendered video, STALE means the page has changed and the previous render plays until the new one is ready.
Timing, length and transparency
The page’s clock is the clip’s source time. Trimming, Speed and the speed curve move the animation with the timeline exactly as they move a video.
- Any length — drag the clip’s edge to make it as long as you like. Finished animations hold their last state and loops keep looping.
- No splitting — an HTML clip is one run of one page, so Split is refused. Change its length by dragging its edges instead.
- Transparency — leave the page’s
htmlandbodywithout a background and everything the page doesn’t paint is transparent, so the clip lies over the layers below it. Paint a full-frame background to cover them. - Sound — sound from the page is not used. Put music and effects on their own audio tracks.
Like any other layer, an HTML clip can be prerendered — see Prerendering Layers and Sequences.
How HTML clips render
Exports draw every HTML clip from the current page, frame by frame, on the same clock the editor uses, so the export shows exactly what you previewed. There is no separate step and nothing to wait for before you click Render Video. When an export starts partway into a page, the render first steps the page up to that moment, and its progress reads Preparing the HTML page with a frame count while it does. If a page can’t be drawn live during an export, the render uses a fresh render of the page instead.
To keep a page frame-exact:
- Drive the animation from the page itself: CSS, the Web Animations API,
requestAnimationFrame, timers, GSAP, anime.js, Lottie, three.js and canvas drawing all follow the clip’s clock. Videos inside the page are moved to the clip’s time. - Random values repeat: the same page produces the same frames every time.
- Avoid what the clock can’t control: timers inside Web Workers, content fetched from the network while the animation runs, and anything that reads the real time some other way.
- Keep the work per frame modest. After an edit or a jump back, the editor steps the page through every frame from the start up to the playhead.
Limits
- Live playback is a desktop-app feature. The web version and iPad play a rendered video of each page.
- On iPad and in Safari, the transparent parts of an HTML clip show as black.
- HTML clips can’t be split, and the page’s own sound is not used.
- Live drawing uses a feature of the app’s built-in browser engine. A page that fails to run live falls back to its rendered video, and the HTML section says why.
For agents
An agent can put a page on a timeline with one call: POST /api/moodboards/{board}/video-projects/{project}/html-clips, with either the page’s HTML (which also creates its HTML card) or the address of an .html file already on the board. The bundled agent skill documents the call and the rules for writing pages that render frame-exact. See Agent-Driven Editing with GLEA.
Where to go next
- Sequences and Presets — the Presets tab and its GL Motion library of ready-made scenes
- GreenLight Motion — have an agent make a whole film out of HTML scenes
- Editing with AI and the Visual Editor — the HTML editor that Edit HTML opens
- Prerendering Layers and Sequences — bake a heavy layer to a video
- Rendering and Output Formats — export the finished project
Leave a Reply