Skip to content


Folders and files

Last commit message
Last commit date

Latest commit



11 Commits

Repository files navigation

Puppeteer GIF Cast

This little application was written out of necessity for writing documentation about UX/UI. All it does is starts a headless instance of puppeteer, loads the url passed to it, and scrolls the page taking screenshots. At the end it will stitch all the screenshots into one gif as if it was a screencast.

This utility expects two mandatory arguments:

  • URL: the url of the website you want to screencast
  • NAME: the name of the gif (.gif will be automatically appended at the end)

Other arguments that can also be passed to control the gif generation:

  • Width: defaults to 768
  • Height: defaults to 600
  • Duration: how long to capture the gif for. Defaults to 60s
  • Scroll: How far down to scroll the page per frame, in pixels. Defaults to 100. Higher numbers means the page will scroll farther per frame, which can be useful for long pages or pages that make heavy use of the browser scroll position.

GIFs are saved in the ./gifs/ folder at the end of the process.

How to use it

clone the repository to your machine:

git clone

cd puppeteer-gif-cast

initialize the project

npm install

to grab a screencast of a website run the command like this:

npm start every-last-drop -- --scroll 500

the generated gif will be located at ./gifs/every-last-drop.gif

alt text

the scroll parameter can be ommited safely like so:

npm start every-last-drop

alt text


To ensure that optional parameters are sent correctly to the node process you MUST pass them after -- Please see examples below


npm start <url> <name>

starts capturing the gif at <url> and save it with <name>.gif

  url   the url to caputre a scrolling gif from                         [string]
  name  the name of the final gif file                                  [string]

      --help      Show help                                            [boolean]
      --version   Show version number                                  [boolean]
  -w, --width     Sets a width for the captured gif      [number] [default: 768]
  -h, --height    Sets a height for the captured gif     [number] [default: 600]
  -s, --scroll    How far to scroll down the per frame   [number] [default: 100]
  -d, --duration  Sets gif duration in seconds           [number]  [default: 60]


# capture gif using default values and saves it as every_last_drop.gif
npm start every_last_drop
# capture gif with custom dimensions
npm start every_last_drop -- --width 1080 --height 720
# capture gif for 120 seconds
npm start every_last_drop -- --duration 120


Creates screencasting-like gifs of page-scrolls






No releases published


No packages published