There is no export button, and there never was
HTML5 animation is a bucket term for everything the browser draws live: CSS keyframes on a hero section, a canvas particle system, a WebGL shader, an SVG morph, a GSAP timeline. What they all share is that every frame is computed the moment it's shown. There's no video file behind any of it, which means no right-click save, no export menu, nothing to hand a converter. A screenshot gets you one frame of a thing whose entire point is motion.
The honest pipeline has three moves: play the animation, capture the tab as video, convert the video to a GIF. What the GIF does the last two in one place.
Capture the tab, not the screen
Open the page with the animation, then head to the converter and hit Record a Tab. Your browser's share picker appears, you point it at the animation's tab, and the capture drops into the editor as a clip when you stop. It's all local: the recording is made inside the page, nothing uploads, and there's no extension to install. Desktop browsers only, recording runs in real time, and it stops itself at five minutes.
- Make it big. The capture is exactly what's on screen, at on-screen size. Zoom the page or go fullscreen so the animation earns its pixels.
- Record several cycles. One clean loop is the goal, but you pick it in the trim, not in the recording. Extra laps are free.
- Sweep the stage. Park the cursor off the animation and silence anything that might pop over it. The recording is faithful to a fault.
More capture technique, including window and full-screen jobs, is in the screen recording guide.
The loop is made in the trim
A GIF loops forever, so the last frame hands off to the first, and any mismatch shows up as a flinch on every lap. That makes looping a trimming problem, and the trim here is built for it. The arrow keys step through the recording one frame at a time, J, K, and L shuttle through it faster, and the I and O keys drop the in and out points on the exact frames you're looking at. Find the pose where the cycle starts, mark the in, step to one frame before that pose returns, mark the out. The seam vanishes.
Two extras earn their keep with animation work. The per-clip speed control runs 0.25x to 4x, so a stately brand animation can be tightened without touching the source. And if the motion reads well backwards, the Bounce toggle plays it forward then straight back inside a single loop, which turns a one-way sweep into a loop with no seam to hide at all.
Every demo GIF on this site came from this pipeline
This isn't theoretical. The demo GIFs across this site, the trim demo, the captions demo, the sequence demo, all of them, were made with the tool itself: the feature running in a tab, Record a Tab pointed at it, one clean loop marked with I and O, converted. If you want a read on the output quality, it's already all over these pages.
The same pipeline covers the classics of the genre: an animated header for a GitHub README, a UI flourish in a changelog, or a product demo for a landing page.
Convert like you mean it
Frame rate at 10 to 15 fps reads smoothly for most UI motion. The palette depends on the art: flat interface colors hold up at 64 colors with dithering off, while WebGL gradients want 128 or 256 with dithering on. The estimated output size recalculates as you adjust, and when a target is strict, the Extra Compression dial typically shaves another 30 to 50% off. No signup, no watermark, no upload, and the page keeps working offline once it's loaded, so the pipeline is exactly as portable as your browser.