Skip to content

How to turn a website into a scrolling GIF

Make an animated GIF of a web page scrolling, from a URL, and keep the file small enough for email, docs and READMEs. When to use a GIF, and when an MP4 is the better choice.

Aviral LakhanpaulUpdated 2 min read

The short answer

Paste the page’s URL into a tool that exports GIF, such as Website Scroll Video, keep the scroll under 20 seconds at 720p or 1080p and 24 fps or less, and export. GIFs are the right choice where video will not play, such as email and some docs; everywhere else an MP4 or WebM of the same scroll is sharper and many times smaller.

When a GIF is the right format

GIF is an old format with a 256-colour palette per frame and compression that was never designed for moving photographs. A scroll of a modern website, with its gradients and images, is close to the worst case for it. It survives because it plays almost everywhere, with no player, no click and no autoplay rules.

  • Use a GIF in an email to a client or a newsletter, in a GitHub README or issue, in docs and wikis that do not embed video, and in chat apps that preview GIFs inline.
  • Use an MP4 or WebM on your own website, in social posts, in portfolios and anywhere a <video> tag works. Same motion, better colour, a fraction of the size.

Make the GIF

  1. Paste the URL

    On the home page, paste the address and let the page load. Cookie banners and chat widgets are cleared before anything is captured.

  2. Choose GIF as the format

    The settings that a GIF cannot carry are capped for you: 24 fps at most, 1080p at most, and 20 seconds at most.

  3. Keep it short and gentle

    Trim the scroll to the part of the page that matters and keep the motion slow. At 24 fps, a fast scroll smears text in a way a viewer notices more in a GIF than in a video.

  4. Preview, then export

    The preview is free. Export when it looks right, and the GIF downloads like any other file.

Keeping the file small

GIF size grows with every pixel, every frame and every colour that changes. In rough order of effect:

What makes a scrolling GIF larger
SettingSmaller fileWhy
Resolution720p rather than 1080pFewer than half the pixels per frame
Length6 to 10 secondsEvery second is another 24 full frames
Frame rate24 fps or lowerGIF has no motion compression to speak of
BackgroundA flat colour, no grainFilm grain and photos change every pixel on every frame
The pageShorter scroll rangeLess movement per frame, fewer new pixels

Other ways to make a website GIF

  • Record the screen and convert the recording to GIF with a converter or a tool like ffmpeg. Works for private pages; the scroll is only as even as your hand.
  • Scripted capture with Puppeteer or Playwright, taking screenshots as the page scrolls and assembling them. Full control, and code to maintain.
  • Free online URL-to-GIF tools. Several exist, with fewer settings; the alternatives page compares the ones that also make video.

Try it on your own site

Paste a link and preview the scroll for free. 51 free credits when you sign up, no card, and no watermark on anything you export.

Recent searches

    Questions, answered

    The short versions of what people ask next.

    Contact
    How do I make a GIF of a website scrolling?

    Paste the URL into a URL-to-video tool that exports GIF, keep the scroll short, and export. Or record your screen while a script scrolls the page and convert the recording to GIF.

    Why is my website GIF so large?

    GIF stores nearly every frame in full, so resolution, length and frame rate multiply together. Drop to 720p, keep it under ten seconds, and avoid photographic or grainy backgrounds.

    Will a GIF play in an email?

    In most mail apps, yes, which is the main reason to choose it. Some desktop clients only show the first frame, so make sure the first frame works on its own.

    Keep reading

    Website Scroll Video logo, a play button over a web page in a browser window.

    Less Time Recording. More Time Building.

    Automate website recordings with customizable motion, smart controls, and export options designed for modern creators.

    Try it now

    Help make your next video better

    Analytics cookies show us which pages help and where people get stuck, so we know what to fix and build next. What we collect

    The pages you record and the videos you make are never part of it, and nothing is used for ads.