Skip to content

PabloLec/website-to-gif

Use this GitHub action with your project
Add this Action to an existing workflow or create a new one
View on Marketplace

Repository files navigation

website-to-gif GitHub release (latest by date) GitHub

This Github Action automatically creates a animated GIF or WebP from a given web page to display on your project README (or anywhere else).

Usage

In your GitHub repo, create a workflow file or extend an existing one. (e.g. .github/workflows/gif.yml)

You have to also include a step to checkout and commit to the repo. You can use the following example gif.yml. Make sure to modify the url value and add any other input you want to use.

.github/workflows/gif.yml

name: Generate demo file

on: push

jobs:
  generate-gif:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Website to file
        uses: PabloLec/[email protected]
        with:
          url: "https://docs.github.com/en/get-started"
      - name: Commit file to GH repo
        run: |
          git config --global user.name "PabloLec/website-to-gif"
          git config --global user.email "[email protected]"
          git add .
          git commit -m 'Update file'
          git push

See official GitHub doc to further customize your workflow.

Inputs

Name Description Default Example
url Web page URL to be captured. Required url: "https://docs.github.com"
save_path File saving path, starts with /. Make sure the path you provide already exists as this action will not create any directory. repo root save_path: "/docs/images/"
file_format Output file format, currently support GIF and WebP GIF file_format: "WebP"
file_name File name, do not include extension or path demo file_name: "ss_25_tps_100"
window_width Browser window width 1920 (px) window_width: 1366
window_height Browser window height 1080 (px) window_height: 768
stop_y Position where file capture should stop bottom of page stop_y: 800
start_y Position where file capture should start 0 (px) start_y: 1024
final_width Final file width 640 (px) final_width: 1024
final_height Final file height 360 (px) final_height: 576
scroll_step Number of pixels by scroll 25 (px) scroll_step: 50
time_per_frame Milliseconds per frame 100 (ms) time_per_frame: 200
start_delay Number of milliseconds to wait for before starting capture 0 (ms) start_delay: 100
no_scoll Capture GIF without page scroll, will discard any scroll related parameter false no_scoll: true
time_between_frames Number of milliseconds between frame captures if no_scroll is true 100 (ms) time_between_frames: 200
number_of_frames Number of frames to be captured if no_scroll is true 20 number_of_frames: 50
resizing_filter Filter used to resize frames, see https://pillow.readthedocs.io/en/stable/reference/Image.html?highlight=resize#PIL.Image.Image.resize LANCZOS resizing_filter: "LANCZOS"

Examples

Increase or decrease scroll_step and time_per_frame to modify file rendering and filesize.

scroll_step: 15 time_per_frame: 80

scroll_step: 25 time_per_frame: 100

scroll_step: 50 time_per_frame: 50

scroll_step: 50 time_per_frame: 100

scroll_step: 50 time_per_frame: 200

You can also capture pages without scrolling

no_scoll: true time_per_frame: 100 time_between_frames: 100 number_of_frames: 50

WebP

WebP rendering will take a lot of time to benefit from lossless quality and file size optimization.

Contributing

Feel free to contribute! To suggest a new feature, report a bug or offer your help, simply open a new issue.