Free video to image sequence converter

Turn any video into a scroll animation

The Apple-style effect where a product turns as you scroll. Try it on the sample below, then drop your own video. It runs in your browser, so your video is never uploaded.

Loading the demo
Demo: sample clip, scroll to play it
Keep scrolling
Now try yours

Drop a video, scroll it back up

Your video never leaves your computer. The frames are made right here in your browser, then you download them with the code.

Drop a video here, or click to pick one

MP4, WebM or MOV. Short clips (3 to 10 seconds) of something moving or turning work best.

Width
Format
Fit

Estimated download: about 3.1 MB for all frames.

How it works

From a video to a scroll animation in three steps

01

Drop a video

Any MP4, WebM or MOV your browser can play. A short clip of something turning, opening or moving forward works best.

02

Pick the frames

Choose how many frames, how wide, how sharp, and which part of the clip. The frames are made right on your computer.

03

Scroll it, then take it

The page above swaps in your animation so you can scroll through it. Download the frames with a ready page and a React component, or copy the code.

Settings

Which settings to pick

For reference, the sample sneaker at 120 frames, 1280 pixels wide and 80% quality comes to about 3.2 MB in WebP.

Frames

More frames means a smoother scroll and a bigger download. 60 to 150 covers most uses. As a guide, 15 to 25 frames for every second of video looks smooth; the tool shows the number per second as you move the slider.

Width

1280 pixels suits most full-screen animations on laptops. Use 960 when most visitors are on phones, and 1920 only for a full-screen hero on large screens, because every frame gets heavier.

Quality

70 to 80% is the sweet spot: the frames look clean and stay small. Drop it lower for a background behind text.

Format

WebP files are the smallest and every current browser shows them. JPEG is there for the rare browser that cannot make WebP files.

Scroll length

How far a visitor scrolls to play the whole clip, in screen heights. 2 to 4 feels natural; longer makes the motion slower and calmer.

Fit

Fill the screen crops the edges to cover the whole window, like a background. Show the whole frame keeps the full picture with bars around it.

Add it to your site

Works with any website builder or code

The download holds the frames, a ready index.html and a React component. Here is where each one goes.

Plain HTML

Open index.html from the download. It holds the whole player, a few dozen lines of plain JavaScript with no library. Copy it into any page and keep the frames folder next to it.

React and Next.js

Put the frames in public/frames/ and drop ScrollAnimation.tsx from the download into your components. It is one component with no dependencies.

Framer

Add a code component, paste ScrollAnimation.tsx, and point it at the address where your frames live (your own hosting or any file host).

Webflow, WordPress and Elementor

Upload the frames to your site's files or any host, then paste the player from index.html into an embed or HTML block and set its frames folder to that address.

GSAP and ScrollTrigger

No library is needed, but if you already use GSAP, the idea is the same: map the scroll progress (0 to 1) to a frame number and draw that frame on a canvas.

Want more motion ideas? Read how to add animations to your website.

FAQ

Frequently Asked
Questions.

Yes. There is no account, no watermark and no limit on how many animations you make.
No. Your browser reads the video and makes the frames on your own computer. Nothing is sent to a server, which is also why it works with private or unreleased footage.
A video cut into still frames that are shown one after another as you scroll, so the scroll bar controls the motion. It is the effect Apple uses on product pages, where a product turns or opens as you move down the page.
Moving a video to an exact moment on every scroll is slow and jumpy in many browsers, especially on phones. Frames are ready pictures, so the browser only has to draw one, which stays smooth.
A short clip, 3 to 10 seconds, with one smooth motion: a product turning, a door opening, a camera moving forward. Clips with fast cuts or shaky motion look choppy when scrubbed.
Between 60 and 150 for most animations. Fewer frames download faster; more frames scroll smoother. Start at 120 and lower it if the download is too big.
Yes. The player draws one frame at a time on a canvas and eases toward your scroll position, so a quick swipe plays through the frames instead of skipping them.
Yes. Upload the frames to your site or any file host and paste the player from the download into a code component, embed or HTML block. The steps for each are above.
Yes. Looops builds a full website from one sentence, and it can turn a video you upload into a scroll animation on your page.

Want it on a real website?

Looops builds the whole site from one sentence, and turns the video you upload into the scroll animation. Free plan, no card required.

Try

Free plan available, no card required