# GIF Scroll Automation : Web Design with Smooth Scrolling GIFs (`dainty_screw/gif-scroll-automation-web-design-with-smooth-scrolling-gifs`) Actor
Create an animated GIF of any scrolling webpage with this free tool. Perfect for testing UX, showcasing projects, or capturing interactive elements. Customize scroll speed, delay, and slow down specific areas to highlight content. Capture animations and clickable features seamlessly in one GIF.
- **URL**: https://apify.com/dainty\_screw/gif-scroll-automation-web-design-with-smooth-scrolling-gifs.md
- **Developed by:** [codemaster devops](https://apify.com/dainty_screw) (community)
- **Categories:** Lead generation, Videos
- **Stats:** 2 total users, 2 monthly users, 100.0% runs succeeded, NaN bookmarks
- **User rating**: No ratings yet
## Pricing
from $0.014 / actor start
This Actor is paid per event and usage. You are charged both the fixed price for specific events and for Apify platform usage.
Since this Actor supports Apify Store discounts, the price gets lower the higher subscription plan you have.
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
### Features
Our free GIF Scroll Animation actor is an automation tool to let you capture any scrolling web page as a GIF.
All content on the full page will be recorded, just as if you were scrolling the page yourself and recording it. But because it's automated, the pace of scrolling will be smooth.
It can be tricky to get a good recording of animations that appear when scrolling down a page. You might not scroll smoothly and the final result could look jerky or awkward. This GIF maker will automate the process, so that you just give it a URL and it will capture a wonderfully smooth animated recording of the page scrolling.
### Why use it?
If you want to showcase your website (or any website) or share it somewhere online, you might prefer to capture a scrolling GIF. That lets you avoid problems with browser support and you embed the GIF anywhere you like, such as on social media or in comments.
The tool can also be used to visually check pages and make sure that the user experience is good. It can let you see what the page will look like to a real person scrolling down the page and highlight problems with the layout or design. The GIF maker would be especially useful if you have to do this regularly for a lot of pages, so that you can avoid manually going to each page and interacting with it in a browser.
### How it works
It's very simple to use. You give the actor a URL, it visits the web page and takes screenshots. The screenshots are then used as frames and turned into a GIF.
There are several settings you can change if you want to change the frame rate, wait before scrolling, compress the GIF, change the viewport, and a bunch of other customizable options. Or you can just give it a URL and go with the default settings.
### Tutorial
Here's a [quick step-by-step guide](https://blog.apify.com/how-to-make-a-scrolling-gif-of-a-web-page/) to teach you how to make an animated scrolling GIF of any web page using GIF Scroll Animation. There's also a one-second history of the GIF and some awesome reaction GIFs to blow your mind...
Or you can watch our [video tutorial](https://www.youtube.com/watch?v=Rb_tI1xyOC0) on GIF Scroll Animation
https://www.youtube.com/watch?v=Rb_tI1xyOC0
### Output
#### Example
Scrolling GIF for www.franshalsmuseum.nl:
#### Storage
The GIF files are stored in the Apify key-value store. The original GIF will always be saved. Additional GIFs might also be stored if you customize the compression method. You can also find links to the GIFs in the Dataset.
### Input parameters
| Field | Type | Required | Default | Description |
| -------- | ------ | -------- | ------- | ----------- |
| url | string | Yes | | Website URL |
| frameRate | integer | No | 7 | Number of frames per second (fps). |
| scrollDown | boolean | Yes | | When true, the actor will scroll down the page and capture it to create the GIF. |
| scrollPercentage | integer | No | 10 | Amount to scroll down determined as a percentage of the viewport height. (%) |
| recordingTimeBeforeAction | integer | No | 1 | Amount of time to capture the screen before doing any action like scrolling down or clicking. (ms) |
| clickSelector | integer | No | | Used to click an element and record it. |
| recordingTimeAfterClick | integer | No | Amount of time to record the screen after clicking an element with the click selector. |
| waitToLoadPage | integer | No | 0 | Set time to wait at the beginning so that page is fully loaded (ms). |
| cookieWindowSelector | string | No | | CSS selector to remove cookie pop-up window if one is present. |
| slowDownAnimations | boolean | No | false |When selected, slows down animations on the page so they can be properly captured. |
| lossyCompression | boolean | No | true | Lossy LZW compression of GIF using Giflossy. |
| loslessCompression | boolean | No | false | Lossless compression of GIF using Gifsicle. |
| viewportWidth | integer | No | 1366 | Inner width of browser window (pixels) |
| viewportHeight | integer | No | 768 | Inner height of browser window (pixels) |
#### Input example
```json
{
"url": "https://www.franshalsmuseum.nl/en/",
"frameRate": 7,
"scrollDown": true,
"recordingTimeBeforeAction": 1500,
"cookieWindowSelector": ".cookiebar"
}
````
# Actor input Schema
## `url` (type: `string`):
Website URL
## `proxyOptions` (type: `object`):
Select proxies to be used by your actor.
## `frameRate` (type: `integer`):
Number of frames per second (fps)
## `scrollDown` (type: `boolean`):
When selected the actor will scroll down the page and capture it to create the gif.
## `scrollPercentage` (type: `integer`):
Amount to scroll down determined as a percentage of the vierport height.
For example, if viewport height is 1000 pixels and scroll percentage is set to 10%.
Then scroll down by 10% of viewport height: 1000 px = 100 px
## `recordingTimeBeforeAction` (type: `integer`):
Amount of time to capture the screen before doing any action like scrolling down or clicking.
## `clickSelector` (type: `string`):
Used to click an element and record it.
## `recordingTimeAfterClick` (type: `integer`):
Amount of time to record the screen after clicking an element with the click selector.
## `waitToLoadPage` (type: `integer`):
Set time to wait in the beginning so that page is fully loaded.
For example when there is loading bar in the beginning that you don't want in the recording.
## `cookieWindowSelector` (type: `string`):
CSS selector for the cookie pop-up window that will be used to remove the element from the DOM.
## `slowDownAnimations` (type: `boolean`):
When selected it slows down animations on the page so they can be properly captured.
## `lossyCompression` (type: `boolean`):
Lossy LZW compression of GIF using Giflossy (part of Gifsicle now).
## `loslessCompression` (type: `boolean`):
Losless compression of GIF using Gifsicle.
## `viewportWidth` (type: `integer`):
Inner width of browser window
## `viewportHeight` (type: `integer`):
Inner height browser window
## Actor input object example
```json
{
"url": "https://crawlee.dev/",
"proxyOptions": {
"useApifyProxy": true
},
"frameRate": 7,
"scrollDown": true,
"scrollPercentage": 10,
"recordingTimeBeforeAction": 1000,
"waitToLoadPage": 5000,
"cookieWindowSelector": ".cookieConsent button",
"slowDownAnimations": false,
"lossyCompression": true,
"loslessCompression": false,
"viewportWidth": 1366,
"viewportHeight": 768
}
```
# 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 = {
"url": "https://crawlee.dev/",
"proxyOptions": {
"useApifyProxy": true
},
"frameRate": 7,
"scrollPercentage": 10,
"recordingTimeBeforeAction": 1000
};
// Run the Actor and wait for it to finish
const run = await client.actor("dainty_screw/gif-scroll-automation-web-design-with-smooth-scrolling-gifs").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 = {
"url": "https://crawlee.dev/",
"proxyOptions": { "useApifyProxy": True },
"frameRate": 7,
"scrollPercentage": 10,
"recordingTimeBeforeAction": 1000,
}
# Run the Actor and wait for it to finish
run = client.actor("dainty_screw/gif-scroll-automation-web-design-with-smooth-scrolling-gifs").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 '{
"url": "https://crawlee.dev/",
"proxyOptions": {
"useApifyProxy": true
},
"frameRate": 7,
"scrollPercentage": 10,
"recordingTimeBeforeAction": 1000
}' |
apify call dainty_screw/gif-scroll-automation-web-design-with-smooth-scrolling-gifs --silent --output-dataset
```
## MCP server setup
```json
{
"mcpServers": {
"apify": {
"command": "npx",
"args": [
"mcp-remote",
"https://mcp.apify.com/?tools=dainty_screw/gif-scroll-automation-web-design-with-smooth-scrolling-gifs",
"--header",
"Authorization: Bearer "
]
}
}
}
```
## OpenAPI specification
```json
{
"openapi": "3.0.1",
"info": {
"title": "GIF Scroll Automation : Web Design with Smooth Scrolling GIFs",
"description": "Create an animated GIF of any scrolling webpage with this free tool. Perfect for testing UX, showcasing projects, or capturing interactive elements. Customize scroll speed, delay, and slow down specific areas to highlight content. Capture animations and clickable features seamlessly in one GIF.",
"version": "0.0",
"x-build-id": "UF4iSVtDxtVMZR0gI"
},
"servers": [
{
"url": "https://api.apify.com/v2"
}
],
"paths": {
"/acts/dainty_screw~gif-scroll-automation-web-design-with-smooth-scrolling-gifs/run-sync-get-dataset-items": {
"post": {
"operationId": "run-sync-get-dataset-items-dainty_screw-gif-scroll-automation-web-design-with-smooth-scrolling-gifs",
"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/dainty_screw~gif-scroll-automation-web-design-with-smooth-scrolling-gifs/runs": {
"post": {
"operationId": "runs-sync-dainty_screw-gif-scroll-automation-web-design-with-smooth-scrolling-gifs",
"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/dainty_screw~gif-scroll-automation-web-design-with-smooth-scrolling-gifs/run-sync": {
"post": {
"operationId": "run-sync-dainty_screw-gif-scroll-automation-web-design-with-smooth-scrolling-gifs",
"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": [
"url",
"proxyOptions"
],
"properties": {
"url": {
"title": "Website URL",
"type": "string",
"description": "Website URL"
},
"proxyOptions": {
"title": "Proxy configuration",
"type": "object",
"description": "Select proxies to be used by your actor."
},
"frameRate": {
"title": "Frame rate",
"type": "integer",
"description": "Number of frames per second (fps)",
"default": 7
},
"scrollDown": {
"title": "Scroll down",
"type": "boolean",
"description": "When selected the actor will scroll down the page and capture it to create the gif.",
"default": true
},
"scrollPercentage": {
"title": "Scroll percentage",
"type": "integer",
"description": "Amount to scroll down determined as a percentage of the vierport height.\n\nFor example, if viewport height is 1000 pixels and scroll percentage is set to 10%.\nThen scroll down by 10% of viewport height: 1000 px = 100 px",
"default": 10
},
"recordingTimeBeforeAction": {
"title": "Capture before action",
"type": "integer",
"description": "Amount of time to capture the screen before doing any action like scrolling down or clicking.",
"default": 1000
},
"clickSelector": {
"title": "Click selector",
"type": "string",
"description": "Used to click an element and record it."
},
"recordingTimeAfterClick": {
"title": "Time to record after click",
"type": "integer",
"description": "Amount of time to record the screen after clicking an element with the click selector."
},
"waitToLoadPage": {
"title": "Wait to load",
"type": "integer",
"description": "Set time to wait in the beginning so that page is fully loaded.\nFor example when there is loading bar in the beginning that you don't want in the recording.",
"default": 0
},
"cookieWindowSelector": {
"title": "Cookie window selector",
"type": "string",
"description": "CSS selector for the cookie pop-up window that will be used to remove the element from the DOM."
},
"slowDownAnimations": {
"title": "Slow down animations",
"type": "boolean",
"description": "When selected it slows down animations on the page so they can be properly captured.",
"default": false
},
"lossyCompression": {
"title": "Lossy",
"type": "boolean",
"description": "Lossy LZW compression of GIF using Giflossy (part of Gifsicle now).",
"default": true
},
"loslessCompression": {
"title": "Losless",
"type": "boolean",
"description": "Losless compression of GIF using Gifsicle.",
"default": false
},
"viewportWidth": {
"title": "Viewport width",
"type": "integer",
"description": "Inner width of browser window",
"default": 1366
},
"viewportHeight": {
"title": "Viewport height",
"type": "integer",
"description": "Inner height browser window",
"default": 768
}
}
},
"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
}
}
}
}
}
}
}
}
}
}
```