RecordHTML

RecordHTML guides

How to record GSAP or CSS animation as video

The phrase frame by frame can describe two different tasks: producing a video with a defined frame count, or advancing an animation to an exact time before capturing each frame. Those are not equivalent. Choose a workflow based on the animation, its dependencies and the delivery requirements. A real-time browser recording can preserve normal playback and media behavior; a controlled frame-stepping pipeline needs explicit control of every relevant timeline.

Create an account or sign in, then review your settings. Your URL and output format carry over. Choose your ZIP file in the recorder after signing in; no file is uploaded on this page.

Understand what the recorder actually controls

RecordHTML configures the browser viewport, capture duration and encoded output frame rate. It records the page in real time and produces an exact frame count. It does not claim to stop browser time and evaluate every CSS, GSAP, video and WebGL state deterministically. Do not interpret a 60 fps output setting as proof that the source animation rendered 60 unique smooth frames every second.

Manual desktop capture introduces other variables: your display, window size, notifications, system load and operator timing. Configured browser capture removes the desktop framing work and makes dimensions and encoding explicit, but it is still important to inspect the source playback. Fix expensive effects or missing dependencies in the creative rather than expecting a format conversion to fix them.

Prepare the GSAP or CSS timeline

Use a page you control and make sure its scripts, images and fonts are available to the recording browser. A repeatable start is more useful than a complicated capture script that races the initial load. Decide whether the animation should start on load, after a delay, or when the creative signals readiness through recording markers.

For a separate custom frame-stepping implementation, GSAP timeline controls can help position an animation at a chosen time. That does not automatically advance independent CSS transitions, media elements, random simulations or external network events. A deterministic pipeline must explicitly account for those systems. Keep that distinction clear when discussing a frame-by-frame export with a developer or client.

Choose the output canvas and timing

Set the viewport to the exact creative dimensions and choose a duration that includes the desired end state. Video supports rates including 23.976, 29.97 and 59.94 fps as well as 15, 24, 25, 30 and 60. Match the placement specification instead of assuming the largest number is better. A 29.97 requirement should not casually be replaced with 30.

If the creative calls trim_start() and trim_end(), configure marker handling and the permitted wait. A delay can be useful for preparation, but it is not a readiness test for every network asset. Check the beginning and end of the recorded file to confirm that markers and playback produce the intended segment.

Choose between video and GIF

Use MP4 or WebM for audio, fractional frame rates and larger delivery canvases. GIF supports whole-number frame rates from 1 to 30 fps, no audio, and a final output limit of 2,073,600 pixels per frame. Decide whether the GIF should loop continuously or play once. A long, detailed, high-frame-rate GIF may be impractically large even when it fits the pixel limit.

Cropping can isolate the relevant area, while output scaling can reduce dimensions. Consider whether smaller text remains readable after scaling. The default account duration limit is 60 seconds; the recorder schema allows up to 300 seconds when configured. Your account limit, not the highest schema value, determines what you can submit.

Review motion rather than only checking metadata

Watch the export at normal speed and inspect difficult sections. Look for stutter, repeated visual states, delayed images, font swaps and a final frame that disappears before the intended end. A file can have the correct dimensions and frame rate while showing poor source playback. Keep an unchanged source and use repeat recordings to isolate the effect of a setting.

When you truly need deterministic frame-stepped rendering, document that requirement explicitly and evaluate a custom browser automation or animation-rendering pipeline. Include resource loading, timeline control, encoding and audio synchronization in the plan. RecordHTML is a self-serve real-time workflow, not a substitute for every specialized offline renderer.

Sources and scope

Checked October 22, 2026. Destination specifications and third-party tools can change. Follow the linked documentation and your actual placement brief rather than treating this guide as network approval.