# How to record smooth scroll videos for Framer templates

> Make a preview video for a Framer, Webflow or Wix template: capture the published site with its appear effects playing, pause on the sections that sell, and export for the listing and social.

Source: https://websitescrollvideo.com/guides/framer-template-preview-video/ · Updated 30 October 2026 · Website Scroll Video

**The short answer:** Publish the template to its free Framer address, paste that URL into a scroll video tool, and switch to Live Capture so Framer’s appear effects and scroll animations play as a visitor would see them. Pause briefly on the hero, the feature grid and the pricing section, add hovers on the interactive cards, and export a 16:9 MP4 for the listing plus a 4:5 or 9:16 cut for social.

## Why template previews are hard to record

Framer templates are built to move. Sections fade and slide in as they enter the viewport, elements scale and parallax on scroll, and cards react to the pointer. A screen recording catches all of it, along with an uneven wheel and whatever your machine drops when three animations fire at once. A simple full-page capture catches none of it, because a still image has no scroll to react to. A preview video needs the motion and an even scroll at the same time.

## Step by step

1. **Publish to a public address.** Publish the template, or its demo, to its `.framer.website` address or a custom domain. It has to open in a private window without a password.
2. **Paste the URL and choose Live Capture.** Paste the address on the [home page](https://websitescrollvideo.com/). Under the engine, choose Live Capture. It screenshots the page at every scroll position rather than panning a still, so appear effects, scroll transforms and sticky sections play exactly as they do in the browser.
3. **Set the pace.** Twelve to twenty seconds suits most template homepages. Smooth is the safe motion; Pulse moves section by section and settles on each, which shows off a template’s structure.
4. **Pause on what sells it.** Click the page where the scroll should stop: the hero, the bento or feature grid, testimonials, pricing. Up to 6 pauses, from 0.5 to 5 seconds each. Turn on Both ways if the video scrolls back up.
5. **Show the hover states.** Turn on the cursor, add a hover and click the card or button it should rest on. The cursor travels there, the hover effect plays, and it holds for 0.5 to 5 seconds before moving on. Eight cursor styles, from macOS to a plain dot.
6. **Export the cuts you need.** A 16:9 MP4 at 1080p or 1440p for the listing, then change the device to Mobile and export a 9:16 or 4:5 cut of the phone layout for X, Instagram or TikTok.

## Live Capture or Static Pan?

Static Pan reads the page once and moves a frame down it. It is fast and perfectly even, but anything that animates on scroll is frozen in whatever state it was in when the page was read. Turn on Settle Animations and entrance effects are run to their finished state first, so nothing is caught half-faded. Live Capture plays the effects for real. It takes considerably longer to render and adds 13 credits to the export.

- **Use Live Capture** when the motion is part of what you are selling, which for most Framer templates it is.
- **Use Static Pan with Settle Animations** for quick drafts, for pages whose animations are only entrances, or for the mobile cut where screen space is tight.

## Finishing touches for a listing

- **A browser frame.** Safari or Chrome, light or dark, so the preview reads as a website at a glance.
- **A background.** Padding around the window with a colour, a gradient or one of the 36 presets. Rounded corners and a soft shadow make it look like a product shot rather than a screen grab.
- **Light and dark.** If the template follows the system theme, force Light or Dark under Color scheme and export one of each.
- **A clean first frame.** Hold a second on the hero before the scroll begins. Marketplaces and social apps often use the first frame as the thumbnail.

> **Webflow, Wix and Shopify work the same way.** Nothing here is specific to Framer except the address. Any template on a public URL, from a Webflow `.webflow.io` site to a Shopify theme demo, is captured the same way.

## Questions

### How do I record a Framer site with its animations?

Use a capture method that scrolls the live page rather than panning a screenshot. In Website Scroll Video that is the Live Capture engine, which screenshots the page at each scroll position so appear effects and scroll transforms play.

### Can I record an unpublished Framer project?

Not from a URL. Publish it to its free `.framer.website` address first, which can be unlisted, then use that link.

### What size should a template preview video be?

Check the marketplace’s own upload guidelines for the exact limits. A 16:9 MP4 at 1080p is a safe default for listings, with a 4:5 or 9:16 version for social.