Skip to content

How to capture scroll animations and parallax in a website video

Fade-ins, reveals, parallax and pinned sections only happen while a page really scrolls. How to capture them in a video, and why most full-page capture tools miss them.

Aviral LakhanpaulUpdated 3 min read

The short answer

Scroll animations only run while the page is really scrolling, so a tool that pans a single full-page screenshot cannot show them. Either screen record the page while a script scrolls it, or use a renderer that captures the page live at every scroll position, such as Website Scroll Video’s Live Capture engine. For a quicker result without the motion, run entrance animations to their finished state before capturing.

Why the animations go missing

Most URL-to-video tools work in two steps: take one very tall screenshot of the page, then move a frame down it. That is fast and perfectly smooth, but the screenshot is a single moment. Anything driven by the scroll position, such as a heading that fades in as it enters the viewport, a parallax image, a section that pins and changes while you scroll, or a counter that ticks up, is frozen in whatever state it was in at that moment.

Depending on how the page was built, that state is one of three:

  • Finished, which looks fine but static.
  • Not started, which leaves blank gaps where sections should be, because elements waiting to fade in are still invisible.
  • Half-way, caught mid-fade or mid-slide, which looks broken.

Your options

Ways to capture scroll animations
ApproachAnimationsScrollSpeed
Pan a still, entrances settledShown in their finished stateCalculated, perfectly evenFast
Live capture at every scroll positionPlay as a visitor sees themCalculated, frame-lockedConsiderably slower
Screen record with a scrolling scriptPlay in real timeAs even as your machine allowsReal time, plus editing

The quick route: settle them first

If the animations are only entrances, fades and slides that bring content into place, the page usually looks right in its finished state. In Website Scroll Video that is the Settle Animations switch, used with the fast Static Pan engine. Entrance animations are run to their end before the page is read, so nothing is caught invisible or half-way, and the scroll is as smooth and quick to render as any other.

The faithful route: capture it live

When the motion is the point, as on most Framer and Webflow templates, agency sites and product launches, switch the engine to Live Capture. Instead of panning one image, it scrolls a real browser to each position and screenshots it there, so reveals, parallax, pinned sections and scroll-linked transforms all play in the video exactly as they do on the page.

  • The scroll is still calculated, so it is as even as Static Pan and holds a locked 24, 30 or 60 fps.
  • Pauses, hovers, frames and backgrounds all work with it, exactly as they do with Static Pan.
  • It holds a real browser for the whole length of the video, which is why it renders considerably slower and adds 13 credits to an export. It is available on every account from the first export, with no plan to unlock.

Recording it yourself

For a page a renderer cannot reach, screen record it while a script scrolls. The auto-scroll guide has the script. Two things to watch:

  • Sites using a smooth-scroll library, such as Lenis or Locomotive Scroll, often drive their animations from the library rather than from the browser’s scroll. A script that calls window.scrollTo can skip past them. Scroll the way the site expects, or record with the library turned off and accept the difference.
  • Animation-heavy pages are the ones most likely to drop frames while recording. Close everything else, record at 60 fps, and see fixing jerky scroll recordings if the take still stutters.

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
    Why are sections blank in my website scroll video?

    They are elements waiting for a scroll-triggered entrance that never fired, because the tool captured a still image of the page. Settle the animations before capture, or use a live capture engine that scrolls the real page.

    Can I record parallax scrolling effects?

    Yes, with a method that really scrolls the page: a screen recording driven by a script, or a renderer that captures at every scroll position, such as Live Capture in Website Scroll Video.

    Does Live Capture cost extra?

    It adds 13 credits to an export, because it keeps a real browser running for the whole length of the video. Everything else about the price is the same.

    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.