# Creating a video from a website: how to auto-scroll through it

> Three ways to make a web page scroll by itself while you capture it: the browser’s autoscroll, a console script you can copy, and a renderer. Plus how fast to go and which curve to use.

Source: https://websitescrollvideo.com/guides/auto-scroll-website-video/ · Updated 30 October 2026 · Website Scroll Video

**The short answer:** Do not scroll by hand. Either paste a short script into the browser console that scrolls the page on an easing curve over a fixed time while your recorder runs, or give the URL to a renderer that calculates the scroll and builds the video without a recorder. As a starting pace, allow about two seconds for every screen-height of page.

## Three ways to auto-scroll

| Method | Speed control | Easing | Needs a recorder |
| --- | --- | --- | --- |
| Browser autoscroll (middle click) | By hand, with the pointer | None | Yes |
| A console script | Exact, in seconds | Any curve you write | Yes |
| A URL-to-video renderer | Exact, in seconds | Chosen from presets | No |

Browser autoscroll, the mode a middle click starts on Windows and Linux, is the quickest to reach for and the least useful: the speed depends on how far the pointer sits from where you clicked, so it wavers, and the pointer has to be on screen to steer it. It is fine for a rough capture, not for one you will publish.

## A script that scrolls the page for you

Open the page, open DevTools (F12, or ⌥ ⌘ I on a Mac), paste this into the Console and press Enter. It waits three seconds so you can start your recorder, then scrolls from top to bottom along an ease-in-out curve over the time you set.

Console script: scroll the whole page smoothly:

```
const SECONDS = 20;        // how long the scroll takes
const WAIT = 3;            // time to start your recorder

document.documentElement.style.scrollBehavior = 'auto';
window.scrollTo(0, 0);

const end = document.documentElement.scrollHeight - innerHeight;
const ease = (t) => (t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2);

setTimeout(() => {
  const start = performance.now();
  const step = (now) => {
    const t = Math.min(1, (now - start) / (SECONDS * 1000));
    window.scrollTo(0, end * ease(t));
    if (t < 1) requestAnimationFrame(step);
  };
  requestAnimationFrame(step);
}, WAIT * 1000);
```

- `scrollBehavior = 'auto'` matters. Many sites set `scroll-behavior: smooth`, which turns every one of the script’s small moves into its own animation and brings the stutter straight back.
- `requestAnimationFrame` moves the page once per displayed frame, so the scroll is as even as the display allows.
- Scroll to the bottom and back once by hand before running it, so lazy-loaded images are already in place and the page height does not change mid-take.
- Sites built on a smooth-scroll library such as Lenis or Locomotive Scroll handle scrolling themselves and may fight the script. If the page lurches, that is why.

## Or skip the recorder entirely

A script still leaves the frame rate to your recorder and your machine. A renderer removes both: [Website Scroll Video](https://websitescrollvideo.com/) reads the whole page once, then calculates where it should be on every frame of a locked 24, 30 or 60 fps video, so a heavy page cannot drop frames and a long one cannot drift. You set the same things the script does, in seconds and by curve, and preview the result before spending anything.

## How fast should it scroll?

Measure the page in screens: its full height divided by the window height. A typical landing page is five to eight screens. Then:

| Purpose | Seconds per screen | An eight-screen page |
| --- | --- | --- |
| Teaser or social cut | About 1 | 8 seconds |
| Portfolio or showcase | About 2 | 16 seconds |
| Readable walkthrough | 3 or more, or pauses | 24 seconds or more |

Faster than a screen a second and text smears into a blur, especially at 30 fps or in a GIF. Slower than three and viewers drift. Where one section matters more than the rest, a pause on it beats slowing down the whole page; Website Scroll Video allows up to 6, between 0.5 and 5 seconds each.

## Which easing curve to use

- **Smooth (ease-in-out).** Starts from rest, cruises, comes to rest. The right default: both ends look deliberate rather than clipped.
- **Glide (ease-out).** Leaves quickly and coasts to a stop, like a flick on a trackpad. Good for short teasers that should open with energy.
- **Linear.** One speed throughout. Best for a background loop, where any change of pace draws the eye.
- **Pulse.** Moves a section, settles, moves again. Reads like someone paging through the site, which suits product tours.

## Making it loop

A video that scrolls down and then cuts back to the top has a visible jump when it loops. Scroll down **and back up** along the same curve instead: the last frame matches the first and the loop is seamless. In Website Scroll Video that is the Down and Back playback, with an optional rest at the bottom before the return and at the top before the loop begins again.

> **Holds make better thumbnails.** A second or two of stillness on the hero before the scroll begins gives platforms a clean first frame to use as the thumbnail. Holds at the start and end can each run up to 10 seconds.

## Questions

### How do I make a web page scroll automatically?

Middle-click and move the pointer for the browser’s own autoscroll, or paste a short script into the DevTools console that calls `window.scrollTo` once per frame along an easing curve. For a video, the script is far more even.

### Is there a Chrome setting for auto-scrolling?

Chrome on Windows and Linux supports middle-click autoscroll, but its speed follows the pointer. There is no built-in timed scroll. Extensions add one, or use a console script or a URL renderer.

### How do I make a website scroll video loop smoothly?

Scroll down and back up along the same curve so the final frame matches the first, rather than cutting from the bottom of the page to the top.