Developer API (HTML/CSS Animation to GIF)

How It Works

Convert your animations in four simple steps

1. Submit Your Animation

Upload your creative as either:

A zip file containing all assets
A publicly accessible HTTP URL

2. Configure Parameters

Specify rendering options including:

Dimensions (width/height)
Duration and frame rate
Quality settings

3. Receive Webhook

Automatic notifications when:

Conversion is complete
Gif is ready for download
Errors occur during processing

4. Check Status

Optional monitoring through our:

Status API endpoint
Real-time progress updates
Error reporting

Note: You'll need an API key to use this service. Get your API key here.

API Endpoints

Upload Zip

POST

https://html5animationtogif.com/api/uploadzip.ashx

Upload a compressed archive containing your HTML5 creative package. Your submission must include:

A single HTML file (entry point)
All associated resources (CSS, JavaScript, and images)

Response
Upon successful upload, you'll receive a creativeid in the response. Store this identifier for all subsequent API calls.

Alternative Submission Method
For animations hosted on your server, use our UploadUrl service instead of zip file upload.

Request Parameters

Parameter	Type	Required	Description
FileData	multi-part form data	Yes	Submit your HTML5 creative (zip) as a multi-part form data upload

Example Request

POST https://html5animationtogif.com/api/uploadzip.ashx HTTP/1.1
Host: html5animationtogif.com
Content-Type: application/binary

const formData = new FormData();
formData.append('file', document.querySelector('input[type=file]').files[0]);

fetch('https://html5animationtogif.com/api/uploadzip.ashx', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => console.log(data));

Response

  
{ "status": "success",  "creativeid": "creative_550x550_10ed7e8783" }
Or
{ "status": " error ",  "message” ": "No file has been uploaded. " }

Upload Url

POST

https://html5animationtogif.com/api/uploadurl.ashx

Submit a publicly accessible URL of your hosted HTML5 creative for processing.

This endpoint is specifically for content hosted on your own servers. For local files, please use the uploadzip.ashx instead.

Requirements

Valid HTTP/HTTPS URL pointing to your HTML5 creative
Publicly accessible endpoint (no authentication required)
All assets must be properly linked with relative paths

Response
Upon successful upload, you'll receive a creativeid in the response. Store this identifier for all subsequent API calls.

Request Parameters

Parameter	Type	Required	Description
url	string	Yes	Post your HTML5 creative URL

Example Request

POST https://html5animationtogif.com/api/uploadurl.ashx  HTTP/1.1
Host: html5animationtogif.com
Content-Type: text/plain

 var data = new FormData();
        data.append("url", "https://previews.envatousercontent.com/files/240056227/banners/A/728x90/index.html"); // URL of creative hosted on your server
        
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'https://html5animationtogif.com/api/uploadurl.ashx', true);
        xhr.onload = function () {
            var response = JSON.parse(xhr.responseText);
            if (response.status == "success") {
                creativeid = response.creativeid;
                
                console.log("creativeid=" + creativeid);
                
                //convert_gif(creativeid);

            } else {
                alert(response.message)
            }

Response

  
{ "status": "success",  "creativeid": "creative_550x550_10ed7e8783" }
Or
{ "status": " error ",  "message” ": "No file has been uploaded. " }

Convert to Gif

POST

https://html5animationtogif.com/api/converttogif.ashx

Converts your HTML5 creative into gif format through asynchronous rendering.

Asynchronous Processing: Conversion begins immediately after API call and continues in the background.

Request Parameters

Parameter	Type	Required	Description
clientid	string	Yes	A unique customer ID, generated when the 'Obtain API Key and Client ID' link is clicked, and subsequently sent via email.
apikey	string	Yes	A unique key, generated when the 'Obtain API Key and Client ID' link is clicked, and subsequently sent via email.
creativeid	string	Yes	The creativeId is a unique identifier returned after successfully uploading your HTML5 content through either: UploadZip or UploadUrl service.
width	integer	Yes	Output width in pixels.
height	integer	Yes	Output height in pixels.
duration	float	Yes	Length of animation.
starttime	float	No	Skips the initial few seconds of the animation before recording the gif. The default value is 0.
loop	integer	Yes	The loop setting determines how many times a GIF animation repeats after its first playthrough. To create an infinite "forever" loop, use the parameter `loop=0`. Note: Acceptable values range from 0 to 1000. If your animation loops more than once, provide the duration of a single loop, not the total duration including all repetitions.
fps	integer	Yes	Specifies the playback speed of the animation. Note: The minimum value is 2 and the maximum is 30.
webhookurl	string	No	Default value: `""` (i.e., `webhookurl=""`) The webhook is a notification mechanism that allows your application to receive an update once a gif is successfully created. To use it, provide the HTTP URL of your application via the `webhookurl` parameter. When the gif is ready, our service will send a POST request to your specified URL with the following parameters: downloadurl – Direct link to download the gif. You can host this gif on your own server. mediaid – Unique ID of the gif in our system. creativeid – Unique ID of your HTML5 creative on our server (generated by `uploadzip` or `uploadurl`). Example: `webhookurl=https://yourserver.com/getgifstatus/` How to access parameters (C# example): `var url = Request["downloadurl"];`
creativefitoption	string	No	Possible values: `"lefttop"` and `"center"` Default value: `"lefttop"` Use `"center"` if your HTML5 creative is displayed in the center of the browser window. (Responsive layout) Use `"lefttop"` if your HTML5 creative is positioned in the top-left corner of the browser. (Fix layout)
encoder	string	No	This option allows you to specify which encoder to use when creating the GIF. Possible values: `FFMPEG`, `LWZENCODER`, `IMAGEMAGIC`, `GIFISKI` Default: `IMAGEMAGIC` IMAGEMAGIC A slightly slower encoder that produces GIFs with good color accuracy and optimized file size. Recommended for: Photographic images taken by a camera, digital camera, or photocopier. FFMPEG A fast encoder that generates GIFs with moderate to good quality (256 colors only) and optimized file size. Recommended for: Digital artwork, illustrations, and computer-generated graphics. GIFISKI A high-speed encoder that produces high-quality GIFs with original or true color (32-bit), resulting in slightly larger file sizes. Recommended for: Use cases where color fidelity is critical. LWZENCODER A fast encoder that produces GIFs with moderate to good quality (256 colors only) and optimized file size. Recommended for: General-purpose use with acceptable quality and speed.
quality	integer	yes	This option specifies the quality level for the generated GIF. Possible values: `0`, `1`, `2`, `3`, `4` Default: `3` (equivalent to 75% quality) Pass one of the above values in the request. These correspond to the following quality levels: `0` → 15% quality `1` → 25% quality `2` → 50% quality `3` → 75% quality (default) `4` → 100% quality
maxsize	integer	no	Specifies the target file size for the output GIF in kilobytes (KB). For example: `maxsize=150` or `maxsize=80` Default value: `0` (no target size) Supported range: `20 KB` to `10000 KB` Note: To achieve the target file size, the renderer may make multiple attempts. It may reduce the frame rate (FPS) and quality if necessary. Example: If you set a target file size of `150 KB` with a frame rate of `5 fps`, the renderer will: Generate the GIF with the given settings Check the resulting file size If the size exceeds 150 KB, it will reduce FPS and quality This process may repeat until the target size is met

Example Request

POST https://html5animationtogif.com/api/converttogif.ashx  HTTP/1.1
Host: html5animationtogif.com
Content-Type: text/plain

var data = new FormData();
        data.append("clientid", clientid);
        data.append("apikey", apikey);
        data.append("creativeid", id);
        data.append("width", "300");
        data.append("height", "600");
        data.append("duration", "8");
        data.append("fps", "12");
          data.append("loop", "1");
        data.append("webhookurl", "");
        data.append("creativefitoption", "center");
          data.append("maxsize", "");
        
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'https://html5animationtogif.com/api/converttogif.ashx', true);
        xhr.onload = function () {
            var response = JSON.parse(xhr.responseText);
            if (response.status == "success") {
                mediaid = response.mediaid;
                console.log("GIF " + mediaid + ".");
                alert("GIF " + mediaid + ".");
                
                //WaitForOutput();
            } else {
                alert(response.message)
            }
        };
        xhr.send(data);

Response

  
{ "status": "success",  "message": "",  " mediaid ": "34488" }
Or
{ "status": "error",  "message": "error message" }

Get Conversion Status

GET

https://html5animationtogif.com/api/checkstatus.ashx

This service allows you to check the conversion status.

It should be called after invoking the converttogif service. You can call it periodically—for example, every 5 seconds.

Note: If you have provided a webhook URL in the converttogif service, you can skip this step. Once the gif is ready, the gif URL and related information will be automatically sent to your webhook.

Request Parameters

Parameter	Type	Required	Description
creativeid	string	Yes	The creativeId is a unique identifier returned after successfully uploading your HTML5 content through either: UploadZip or UploadUrl service.
mediaid	string	Yes	The mediaid is a unique identifier returned by the ConvertToGif service.
fileext	string	Yes	The file extension for an GIF file. (i.e gif)

Example Request

GET https://html5animationtogif.com/api/checkstatus.ashx  HTTP/1.1
Host: html5animationtogif.com
Content-Type: text/plain

 function WaitForOutput() {

        var xhr = new XMLHttpRequest();
        xhr.open('GET', "https://html5animationtogif.com/api/checkstatus.ashx?creativeid=" + creativeid + "&mediaid=" + mediaid + "&fileext=gif", true);
      
        xhr.onload = function () {
            
            
            var response = JSON.parse(xhr.responseText);
            
            if (response.status == "success") {
                if (response.jobstatus != "done") {
                    window.setTimeout(WaitForOutput, 5000);
                }
                else if (response.jobstatus == "done") {
                    var URL=response.url;
                }
            }
            else if (response.status == "error") { alert(response.message) }
        };
        xhr.send();

    }

Response Parameters

Parameter	Type	Description
status	string	The `status` field indicates the result of your API request with two possible values: "success" - The operation completed successfully "error" - The operation failed (check error details) .
jobstatus	string	The `jobstatus` field indicates the current processing status. Possible values include "Pending", progress percentages such as "10%", "50%", and "Done". Pending Initial state when request is queued XX% Percentage complete (e.g., 25%, 50%, 75%) Done Processing successfully completed Note: Percentage values may not increment linearly due to varying processing stages.
message	string	Indicates the error message, if any occurred during processing.
url	string	The download URL of the generated GIF .

Response

  
Specifies, scrapping of content 
{ “status”: "success",  "jobstatus": "Scraping content. Please wait...",  "url": "" }

Specifies, encoding of gif

{ "status": "success",  "jobstatus": "20%",  "url": "" }
{ "status": "success",  "jobstatus": "40%",  "url": "" }
{ "status": "success",  "jobstatus": "90%",  "url": "" }

Specifies, gif has been created.
{ "status": "success",  "jobstatus": "done",  "url": "https://html5animationtogif.com/API/mediadownload.ashx?mediaid=34488&creativeid=creative_550x550_10ed7e8783&fileext=gif&inline=y" }

Gif Synchronization Solution

Problem Definition

When recording HTML5 animations to gif, two key challenges arise:

Initial Load Delay: The creative may take time to load resources before animation begins
Loader Screens: Many animations display loaders before showing actual content

These factors make it difficult to automatically capture the exact start and true end of the animation content.

Implementation Solution

Add these JavaScript functions to your HTML5 creative:

trim_start()

Call this when your actual animation begins (after loaders/initialization):

function animationStart() {
  // Your animation code
  if (typeof trim_start === 'function') {
    trim_start(); // Signals actual content beginning
  }



}

trim_end()

Call this when your animation completely finishes:

function animationEnd() {
  // Cleanup code
  if (typeof trim_end === 'function') {
    trim_end(); // Signals content completion
  }
}

Complete Integration Example


    // Place the code in your JavaScript file
    
    var trim_request_url = "http://localhost/capturestart/trim_media.ashx";

    function trim_start()
    {
    try {
    var timeinmilisec = Math.abs(new Date() - new Date("1970/01/01"));
    var request = new XMLHttpRequest();
    request.open('GET', trim_request_url + "?action=start&time=" + timeinmilisec, true);
    request.send(null);
    } catch{ }

    }


    function trim_end() {
    try {
    var timeinmilisec = Math.abs(new Date() - new Date("1970/01/01"));
    var request = new XMLHttpRequest();
    request.open('GET', trim_request_url + "?action=end&time=" + timeinmilisec, true);
    request.send(null);
    } catch{ }

    }

The gif renderer will use these markers to precisely trim your gif, eliminating any loader screens or initialization periods.

Note: These functions are automatically detected by our gif renderer - no additional configuration needed.

Duration Calculation: Total duration = (Approximate buffer for loading) + (Actual animation's length) + (Addtional buffer of 4 seconds)
Example: If animation runs 6s after 3s load time, pass duration= 3 + 6 + 4= 13s (or slightly higher) to the converttogif api (i.e duration=13).

Initialization

Renderer opens HTML5 creative in browser (load time begins)

Content Start

Animation calls trim_media.ashx?action=start (3s in example)

Content End

Animation calls trim_media.ashx?action=end (9s total in example)

Initialization

Renderer records 4s extra (13s total in example

Final Output

Renderer creates 6s gif

The renderer automatically trims between your markers, but needs the total duration (including buffer) to properly allocate resources.

Pro Tip:

When uncertain about load times, use this safe default formula:

duration = (Animation Length) + 10 seconds buffer

Example: For a 15s animation, pass duration=25 to ConvertToGif API

Rate Limits

The API is limited to 100 requests per hour per API key. Contact us if you need higher limits.

Client Libraries

JavaScript

HTML example with javascript

Download

Developer API (HTML/CSS Animation to GIF)

How It Works

1. Submit Your Animation

2. Configure Parameters

3. Receive Webhook

4. Check Status

API Endpoints

Upload Zip

Request Parameters

Example Request

Response

Upload Url

Requirements

Request Parameters

Example Request

Response

Convert to Gif

Request Parameters

IMAGEMAGIC

FFMPEG

GIFISKI

LWZENCODER

Example Request

Response

Get Conversion Status

Request Parameters

Example Request

Response Parameters

Response

Gif Synchronization Solution

Problem Definition

Implementation Solution

trim_start()

trim_end()

Complete Integration Example

Initialization

Content Start

Content End

Initialization

Final Output

Rate Limits

Client Libraries

JavaScript