# Gif Scroll Animation (`api-empire/gif-scroll-animation`) Actor - **URL**: https://apify.com/api-empire/gif-scroll-animation.md - **Developed by:** [API Empire](https://apify.com/api-empire) (community) - **Categories:** Automation, Lead generation, AI - **Stats:** 2 total users, 1 monthly users, 100.0% runs succeeded, NaN bookmarks - **User rating**: No ratings yet ## Pricing from $4.99 / 1,000 results This Actor is paid per event and usage. You are charged both the fixed price for specific events and for Apify platform usage. Learn more: https://docs.apify.com/platform/actors/running/actors-in-store#pay-per-event ## What's an Apify Actor? Actors are a software tools running on the Apify platform, for all kinds of web data extraction and automation use cases. In Batch mode, an Actor accepts a well-defined JSON input, performs an action which can take anything from a few seconds to a few hours, and optionally produces a well-defined JSON output, datasets with results, or files in key-value store. In Standby mode, an Actor provides a web server which can be used as a website, API, or an MCP server. Actors are written with capital "A". ## How to integrate an Actor? If asked about integration, you help developers integrate Actors into their projects. You adapt to their stack and deliver integrations that are safe, well-documented, and production-ready. The best way to integrate Actors is as follows. In JavaScript/TypeScript projects, use official [JavaScript/TypeScript client](https://docs.apify.com/api/client/js.md): ```bash npm install apify-client ``` In Python projects, use official [Python client library](https://docs.apify.com/api/client/python.md): ```bash pip install apify-client ``` In shell scripts, use [Apify CLI](https://docs.apify.com/cli/docs.md): ````bash # MacOS / Linux curl -fsSL https://apify.com/install-cli.sh | bash # Windows irm https://apify.com/install-cli.ps1 | iex ```bash In AI frameworks, you might use the [Apify MCP server](https://docs.apify.com/platform/integrations/mcp.md). If your project is in a different language, use the [REST API](https://docs.apify.com/api/v2.md). For usage examples, see the [API](#api) section below. For more details, see Apify documentation as [Markdown index](https://docs.apify.com/llms.txt) and [Markdown full-text](https://docs.apify.com/llms-full.txt). # README ## 🎬 GIF Scroll Animation > **Capture any webpage as a beautiful, smooth, scrolling animated GIF — in seconds.** ### 📖 Overview **GIF Scroll Animation** is a powerful Apify Actor that launches a real Chromium browser, navigates to your URL, scrolls the full page from top to bottom, and saves every frame as a looping animated GIF. Use it to create website previews, onboarding demos, portfolio showcases, and social media content. Supports bulk URL input, custom viewport sizing, frame rate control, cookie banner dismissal, click interactions, and gifsicle-powered compression. --- ### ✨ Why Choose This Actor? | Feature | This Actor | |---------|-----------| | 🖥️ Real browser rendering | ✅ Playwright + Chromium | | 📦 Bulk URL input | ✅ Unlimited URLs | | 🗜️ Compression | ✅ Lossy + Lossless via gifsicle | | 🍪 Cookie handling | ✅ Auto-dismiss + custom selector | | 🔀 Proxy fallback | ✅ Direct → Datacenter → Residential | | 💾 Live output | ✅ Per-URL results saved immediately | | 🖼️ GIF preview in Console | ✅ Image column in output table | --- ### 🎯 Key Features - 📸 **Real browser screenshots** — renders JavaScript, CSS animations, lazy-loaded images - 🌐 **Bulk URL input** — capture dozens of pages in one run - 📐 **Custom viewport** — set width & height for perfect canvas sizing - 🎞️ **Adjustable FPS** — 1–30 frames per second - ⬇️ **Full-page scroll** — configurable step size and max frame cap - 🖱️ **Click interactions** — click any CSS selector and record the result - 🍪 **Cookie handling** — auto-dismiss common consent dialogs or remove by selector - 🗜️ **Dual compression** — optional lossy (gifsicle -O3 --lossy=80) and lossless variants - 🔀 **Proxy fallback** — direct → datacenter → residential, auto-triggered on blocks - 🐢 **Animation slow-down** — capture CSS animations at 10% speed for clarity - 💾 **Live KVS upload** — GIFs stored in the run's Key-Value Store, accessible via URL --- ### 📥 Input ```json { "urls": [ { "url": "https://crawlee.dev/" }, { "url": "https://apify.com" } ], "viewportWidth": 1366, "viewportHeight": 768, "frameRate": 7, "scrollDown": true, "scrollPercentage": 10, "recordingTimeBeforeAction": 1000, "clickSelector": "", "recordingTimeAfterClick": 1000, "waitToLoadPage": 0, "cookieWindowSelector": "", "autoDismissCookies": true, "slowDownAnimations": false, "lossyCompression": true, "losslessCompression": false, "maxFrames": 600, "pageLoadTimeout": 90, "retries": 2, "proxyConfiguration": { "useApifyProxy": false } } ```` | Field | Type | Default | Description | |-------|------|---------|-------------| | `urls` | array | required | URLs to capture | | `viewportWidth` | integer | 1366 | Browser width (px) | | `viewportHeight` | integer | 768 | Browser height (px) | | `frameRate` | integer | 7 | Output GIF frames per second | | `scrollDown` | boolean | true | Scroll page top-to-bottom | | `scrollPercentage` | integer | 10 | Scroll step as % of viewport height | | `recordingTimeBeforeAction` | integer | 1000 | Hold first frame (ms) | | `clickSelector` | string | "" | CSS selector to click (optional) | | `recordingTimeAfterClick` | integer | 1000 | Record duration after click (ms) | | `waitToLoadPage` | integer | 0 | Extra wait after page load (ms) | | `cookieWindowSelector` | string | "" | CSS selector of cookie banner to remove | | `autoDismissCookies` | boolean | true | Auto-click cookie accept buttons | | `slowDownAnimations` | boolean | false | Slow animations to 10% speed | | `lossyCompression` | boolean | true | Generate lossy-compressed variant | | `losslessCompression` | boolean | false | Generate lossless-compressed variant | | `maxFrames` | integer | 600 | Cap on total scroll frames | | `pageLoadTimeout` | integer | 90 | Page load timeout in seconds | | `retries` | integer | 2 | Retry attempts per URL | | `proxyConfiguration` | object | no proxy | Apify proxy settings | *** ### 📤 Output Each captured GIF is uploaded to the run's **Key-Value Store** and a dataset row is pushed immediately. If both original and compressed variants are requested, each gets its own dataset row. ```json { "url": "https://crawlee.dev/", "site_name": "crawlee.dev", "gif_type": "original", "gif_key": "crawlee.dev-scroll_original", "gif_url": "https://api.apify.com/v2/key-value-stores//records/crawlee.dev-scroll_original", "frame_count": 42, "file_size_bytes": 1215463, "file_size_human": "1.2 MB", "viewport": "1366x768", "frame_rate": 7, "success": true, "error_message": null, "captured_at": "2026-05-21T14:00:00+00:00" } ``` *** ### 🚀 How to Use (Apify Console) 1. Go to [console.apify.com](https://console.apify.com) → **Actors** 2. Search for **GIF Scroll Animation** and open it 3. Add your URLs in the **Website URLs** field 4. Adjust viewport, FPS, and compression settings as needed 5. Click **Start** 6. Watch the real-time logs — you'll see frames captured as they happen 7. Open the **Output** tab to see your GIF table with image previews 8. Click any GIF URL to download or preview *** ### 🤖 Use via API ```bash curl -X POST \ "https://api.apify.com/v2/acts/YOUR_ACTOR_ID/runs?token=YOUR_TOKEN" \ -H "Content-Type: application/json" \ -d '{ "urls": [{"url": "https://crawlee.dev/"}], "frameRate": 7, "lossyCompression": true }' ``` *** ### 🔀 Proxy Behavior | Scenario | Behavior | |----------|----------| | Default | Direct request (no proxy) | | Target blocks direct | Auto-fallback to Apify Datacenter proxy | | Datacenter blocked | Auto-fallback to Residential proxy | | Residential blocked | Retry up to 3 times with residential | | Fallback triggered | All subsequent requests use the fallback proxy | All proxy transitions are logged in real time. *** ### 💰 Pricing This actor uses the **Pay per usage** model — you pay only for the Apify platform compute and proxy costs. No additional Store charges. *** ### ❓ Frequently Asked Questions **Q: What format are the output GIFs in?** A: Standard animated GIF. Original, lossy-compressed, and lossless-compressed variants are available. **Q: Why is my GIF blank or only one frame?** A: Check if the page uses authentication or a full-screen overlay. Try setting `waitToLoadPage` to 2000–5000 ms. **Q: How do I make a smaller GIF?** A: Enable `lossyCompression`, reduce `frameRate` to 5, or increase `scrollPercentage` to 15–20. **Q: Can it handle infinite-scroll pages?** A: Yes, set `maxFrames` to cap the recording. Default is 600 frames. **Q: What viewport sizes work best?** A: 1366×768 is a common laptop screen. Use 1920×1080 for full HD. Smaller viewports (1024×576) produce smaller files. *** ### 🛠️ Support and Feedback Found a bug or have a feature request? Open an issue or contact the author through the Apify platform. # Actor input Schema ## `urls` (type: `array`): One or more website URLs to capture as scrolling animated GIFs. Each URL will produce its own GIF output. ## `frameRate` (type: `integer`): Frames per second for the output GIF. Higher values = smoother animation but larger file size. ## `scrollDown` (type: `boolean`): Scroll the page from top to bottom while recording. Uncheck to capture a static page. ## `scrollPercentage` (type: `integer`): How much to scroll per frame, as a percentage of the viewport height. E.g. 10 means scroll 10% of viewport each step. ## `recordingTimeBeforeAction` (type: `integer`): Milliseconds to hold the first frame before scrolling begins. Adds a pause at the start of the GIF. ## `clickSelector` (type: `string`): Optional CSS selector of an element to click and record. Leave empty to skip clicking. ## `recordingTimeAfterClick` (type: `integer`): Milliseconds to record after a click action. ## `waitToLoadPage` (type: `integer`): Extra milliseconds to wait after the page loads before recording starts. Useful for lazy-loaded content. ## `cookieWindowSelector` (type: `string`): Optional CSS selector of a cookie/consent pop-up element to remove from the DOM before recording. ## `autoDismissCookies` (type: `boolean`): Automatically click common cookie-consent accept buttons before recording starts. ## `slowDownAnimations` (type: `boolean`): Slow CSS/JS animations to 10% speed so they capture cleanly in the GIF. ## `lossyCompression` (type: `boolean`): Generate an extra lossy-compressed GIF variant using gifsicle -O3 --lossy=80. Significantly smaller file size. ## `losslessCompression` (type: `boolean`): Generate an extra lossless-compressed GIF variant using gifsicle -O3. ## `maxFrames` (type: `integer`): Safety cap on the number of frames captured (prevents runaway captures on infinite-scroll pages). ## `viewportWidth` (type: `integer`): Width of the browser viewport in pixels. This is also the width of the output GIF. ## `viewportHeight` (type: `integer`): Height of the browser viewport in pixels. This is also the height of the output GIF. ## `proxyConfiguration` (type: `object`): Choose whether to use Apify Proxy for this run. Leave disabled to connect directly; the actor can still auto-fallback to datacenter or residential proxies if the site blocks you. ## Actor input object example ```json { "urls": [ "https://crawlee.dev/" ], "frameRate": 7, "scrollDown": true, "scrollPercentage": 10, "recordingTimeBeforeAction": 1000, "clickSelector": "", "recordingTimeAfterClick": 1000, "waitToLoadPage": 0, "cookieWindowSelector": "", "autoDismissCookies": true, "slowDownAnimations": false, "lossyCompression": true, "losslessCompression": false, "maxFrames": 600, "viewportWidth": 1366, "viewportHeight": 768, "proxyConfiguration": { "useApifyProxy": false } } ``` # API You can run this Actor programmatically using our API. Below are code examples in JavaScript, Python, and CLI, as well as the OpenAPI specification and MCP server setup. ## JavaScript example ```javascript import { ApifyClient } from 'apify-client'; // Initialize the ApifyClient with your Apify API token // Replace the '' with your token const client = new ApifyClient({ token: '', }); // Prepare Actor input const input = { "urls": [ "https://crawlee.dev/" ], "proxyConfiguration": { "useApifyProxy": false } }; // Run the Actor and wait for it to finish const run = await client.actor("api-empire/gif-scroll-animation").call(input); // Fetch and print Actor results from the run's dataset (if any) console.log('Results from dataset'); console.log(`💾 Check your data here: https://console.apify.com/storage/datasets/${run.defaultDatasetId}`); const { items } = await client.dataset(run.defaultDatasetId).listItems(); items.forEach((item) => { console.dir(item); }); // 📚 Want to learn more 📖? Go to → https://docs.apify.com/api/client/js/docs ``` ## Python example ```python from apify_client import ApifyClient # Initialize the ApifyClient with your Apify API token # Replace '' with your token. client = ApifyClient("") # Prepare the Actor input run_input = { "urls": ["https://crawlee.dev/"], "proxyConfiguration": { "useApifyProxy": False }, } # Run the Actor and wait for it to finish run = client.actor("api-empire/gif-scroll-animation").call(run_input=run_input) # Fetch and print Actor results from the run's dataset (if there are any) print("💾 Check your data here: https://console.apify.com/storage/datasets/" + run["defaultDatasetId"]) for item in client.dataset(run["defaultDatasetId"]).iterate_items(): print(item) # 📚 Want to learn more 📖? Go to → https://docs.apify.com/api/client/python/docs/quick-start ``` ## CLI example ```bash echo '{ "urls": [ "https://crawlee.dev/" ], "proxyConfiguration": { "useApifyProxy": false } }' | apify call api-empire/gif-scroll-animation --silent --output-dataset ``` ## MCP server setup ```json { "mcpServers": { "apify": { "command": "npx", "args": [ "mcp-remote", "https://mcp.apify.com/?tools=api-empire/gif-scroll-animation", "--header", "Authorization: Bearer " ] } } } ``` ## OpenAPI specification ```json { "openapi": "3.0.1", "info": { "title": "Gif Scroll Animation", "version": "0.1", "x-build-id": "pyUUnB5W0uwn3C3Ci" }, "servers": [ { "url": "https://api.apify.com/v2" } ], "paths": { "/acts/api-empire~gif-scroll-animation/run-sync-get-dataset-items": { "post": { "operationId": "run-sync-get-dataset-items-api-empire-gif-scroll-animation", "x-openai-isConsequential": false, "summary": "Executes an Actor, waits for its completion, and returns Actor's dataset items in response.", "tags": [ "Run Actor" ], "requestBody": { "required": true, "content": { "application/json": { "schema": { "$ref": "#/components/schemas/inputSchema" } } } }, "parameters": [ { "name": "token", "in": "query", "required": true, "schema": { "type": "string" }, "description": "Enter your Apify token here" } ], "responses": { "200": { "description": "OK" } } } }, "/acts/api-empire~gif-scroll-animation/runs": { "post": { "operationId": "runs-sync-api-empire-gif-scroll-animation", "x-openai-isConsequential": false, "summary": "Executes an Actor and returns information about the initiated run in response.", "tags": [ "Run Actor" ], "requestBody": { "required": true, "content": { "application/json": { "schema": { "$ref": "#/components/schemas/inputSchema" } } } }, "parameters": [ { "name": "token", "in": "query", "required": true, "schema": { "type": "string" }, "description": "Enter your Apify token here" } ], "responses": { "200": { "description": "OK", "content": { "application/json": { "schema": { "$ref": "#/components/schemas/runsResponseSchema" } } } } } } }, "/acts/api-empire~gif-scroll-animation/run-sync": { "post": { "operationId": "run-sync-api-empire-gif-scroll-animation", "x-openai-isConsequential": false, "summary": "Executes an Actor, waits for completion, and returns the OUTPUT from Key-value store in response.", "tags": [ "Run Actor" ], "requestBody": { "required": true, "content": { "application/json": { "schema": { "$ref": "#/components/schemas/inputSchema" } } } }, "parameters": [ { "name": "token", "in": "query", "required": true, "schema": { "type": "string" }, "description": "Enter your Apify token here" } ], "responses": { "200": { "description": "OK" } } } } }, "components": { "schemas": { "inputSchema": { "type": "object", "required": [ "urls" ], "properties": { "urls": { "title": "🌐 Website URLs", "type": "array", "description": "One or more website URLs to capture as scrolling animated GIFs. Each URL will produce its own GIF output.", "items": { "type": "string" } }, "frameRate": { "title": "🎞️ Frame Rate (FPS)", "minimum": 1, "maximum": 30, "type": "integer", "description": "Frames per second for the output GIF. Higher values = smoother animation but larger file size.", "default": 7 }, "scrollDown": { "title": "⬇️ Scroll Down", "type": "boolean", "description": "Scroll the page from top to bottom while recording. Uncheck to capture a static page.", "default": true }, "scrollPercentage": { "title": "📊 Scroll Step (%)", "minimum": 1, "maximum": 100, "type": "integer", "description": "How much to scroll per frame, as a percentage of the viewport height. E.g. 10 means scroll 10% of viewport each step.", "default": 10 }, "recordingTimeBeforeAction": { "title": "⏱️ Hold Time Before Scroll (ms)", "minimum": 0, "maximum": 10000, "type": "integer", "description": "Milliseconds to hold the first frame before scrolling begins. Adds a pause at the start of the GIF.", "default": 1000 }, "clickSelector": { "title": "🖱️ Click Selector (CSS)", "type": "string", "description": "Optional CSS selector of an element to click and record. Leave empty to skip clicking.", "default": "" }, "recordingTimeAfterClick": { "title": "⏳ Record Duration After Click (ms)", "minimum": 0, "maximum": 10000, "type": "integer", "description": "Milliseconds to record after a click action.", "default": 1000 }, "waitToLoadPage": { "title": "⌛ Wait After Page Load (ms)", "minimum": 0, "maximum": 30000, "type": "integer", "description": "Extra milliseconds to wait after the page loads before recording starts. Useful for lazy-loaded content.", "default": 0 }, "cookieWindowSelector": { "title": "🍪 Cookie Banner Selector (CSS)", "type": "string", "description": "Optional CSS selector of a cookie/consent pop-up element to remove from the DOM before recording.", "default": "" }, "autoDismissCookies": { "title": "🚫 Auto-Dismiss Cookie Dialogs", "type": "boolean", "description": "Automatically click common cookie-consent accept buttons before recording starts.", "default": true }, "slowDownAnimations": { "title": "🐢 Slow Down Animations", "type": "boolean", "description": "Slow CSS/JS animations to 10% speed so they capture cleanly in the GIF.", "default": false }, "lossyCompression": { "title": "🗜️ Lossy Compression (gifsicle)", "type": "boolean", "description": "Generate an extra lossy-compressed GIF variant using gifsicle -O3 --lossy=80. Significantly smaller file size.", "default": true }, "losslessCompression": { "title": "🔒 Lossless Compression (gifsicle)", "type": "boolean", "description": "Generate an extra lossless-compressed GIF variant using gifsicle -O3.", "default": false }, "maxFrames": { "title": "🔢 Max Frames", "minimum": 10, "maximum": 2000, "type": "integer", "description": "Safety cap on the number of frames captured (prevents runaway captures on infinite-scroll pages).", "default": 600 }, "viewportWidth": { "title": "📐 Viewport Width (px)", "minimum": 320, "maximum": 3840, "type": "integer", "description": "Width of the browser viewport in pixels. This is also the width of the output GIF.", "default": 1366 }, "viewportHeight": { "title": "📏 Viewport Height (px)", "minimum": 240, "maximum": 2160, "type": "integer", "description": "Height of the browser viewport in pixels. This is also the height of the output GIF.", "default": 768 }, "proxyConfiguration": { "title": "Apify Proxy", "type": "object", "description": "Choose whether to use Apify Proxy for this run. Leave disabled to connect directly; the actor can still auto-fallback to datacenter or residential proxies if the site blocks you." } } }, "runsResponseSchema": { "type": "object", "properties": { "data": { "type": "object", "properties": { "id": { "type": "string" }, "actId": { "type": "string" }, "userId": { "type": "string" }, "startedAt": { "type": "string", "format": "date-time", "example": "2025-01-08T00:00:00.000Z" }, "finishedAt": { "type": "string", "format": "date-time", "example": "2025-01-08T00:00:00.000Z" }, "status": { "type": "string", "example": "READY" }, "meta": { "type": "object", "properties": { "origin": { "type": "string", "example": "API" }, "userAgent": { "type": "string" } } }, "stats": { "type": "object", "properties": { "inputBodyLen": { "type": "integer", "example": 2000 }, "rebootCount": { "type": "integer", "example": 0 }, "restartCount": { "type": "integer", "example": 0 }, "resurrectCount": { "type": "integer", "example": 0 }, "computeUnits": { "type": "integer", "example": 0 } } }, "options": { "type": "object", "properties": { "build": { "type": "string", "example": "latest" }, "timeoutSecs": { "type": "integer", "example": 300 }, "memoryMbytes": { "type": "integer", "example": 1024 }, "diskMbytes": { "type": "integer", "example": 2048 } } }, "buildId": { "type": "string" }, "defaultKeyValueStoreId": { "type": "string" }, "defaultDatasetId": { "type": "string" }, "defaultRequestQueueId": { "type": "string" }, "buildNumber": { "type": "string", "example": "1.0.0" }, "containerUrl": { "type": "string" }, "usage": { "type": "object", "properties": { "ACTOR_COMPUTE_UNITS": { "type": "integer", "example": 0 }, "DATASET_READS": { "type": "integer", "example": 0 }, "DATASET_WRITES": { "type": "integer", "example": 0 }, "KEY_VALUE_STORE_READS": { "type": "integer", "example": 0 }, "KEY_VALUE_STORE_WRITES": { "type": "integer", "example": 1 }, "KEY_VALUE_STORE_LISTS": { "type": "integer", "example": 0 }, "REQUEST_QUEUE_READS": { "type": "integer", "example": 0 }, "REQUEST_QUEUE_WRITES": { "type": "integer", "example": 0 }, "DATA_TRANSFER_INTERNAL_GBYTES": { "type": "integer", "example": 0 }, "DATA_TRANSFER_EXTERNAL_GBYTES": { "type": "integer", "example": 0 }, "PROXY_RESIDENTIAL_TRANSFER_GBYTES": { "type": "integer", "example": 0 }, "PROXY_SERPS": { "type": "integer", "example": 0 } } }, "usageTotalUsd": { "type": "number", "example": 0.00005 }, "usageUsd": { "type": "object", "properties": { "ACTOR_COMPUTE_UNITS": { "type": "integer", "example": 0 }, "DATASET_READS": { "type": "integer", "example": 0 }, "DATASET_WRITES": { "type": "integer", "example": 0 }, "KEY_VALUE_STORE_READS": { "type": "integer", "example": 0 }, "KEY_VALUE_STORE_WRITES": { "type": "number", "example": 0.00005 }, "KEY_VALUE_STORE_LISTS": { "type": "integer", "example": 0 }, "REQUEST_QUEUE_READS": { "type": "integer", "example": 0 }, "REQUEST_QUEUE_WRITES": { "type": "integer", "example": 0 }, "DATA_TRANSFER_INTERNAL_GBYTES": { "type": "integer", "example": 0 }, "DATA_TRANSFER_EXTERNAL_GBYTES": { "type": "integer", "example": 0 }, "PROXY_RESIDENTIAL_TRANSFER_GBYTES": { "type": "integer", "example": 0 }, "PROXY_SERPS": { "type": "integer", "example": 0 } } } } } } } } } } ```