Build a $5k scroll animation with zero code ⚡

You know those scroll animations on Apple's product pages, where you scroll down and the product spins, builds itself, or comes apart? Agencies quote thousands for those, because the usual route is a 3D artist rendering a long image sequence and a developer wiring it to your scroll position.

The shortcut is four moves. Generate the start and end of the animation with AI, let AI fill in every frame between them, slice that clip back into images, then hand the folder to an AI coding tool that writes the scroll code for you.

What you're actually building 🧠

A scroll-linked image sequence. Instead of a video that plays on its own timeline, you have a stack of still frames painted onto an HTML canvas, and your scroll position decides which frame is showing. Scroll down, it steps forward. Scroll up, it steps back. That is why it feels like you are physically driving the animation with your finger.

This is genuinely the technique behind those high-end product pages, not an approximation of it. The canonical write-up of the Apple AirPods Pro version is on CSS-Tricks, which walks through the same canvas plus drawImage approach the browser uses (MDN reference).

What this costs, honestly 💡

Two of the four steps are free, and one has a plan gate worth knowing about before you start clicking.

The four steps 🛠

1. 🎨 Generate two frames in Flow. Go to labs.google/fx/tools/flow and generate two images from text: a start frame (how the animation begins) and an end frame (how it ends). The exact prompts are in the next section. Keep the subject, camera angle and lighting identical between them so only the thing you want to animate actually changes. If you are looking for Whisk, labs.google/whisk now redirects into Flow, so everything happens in one place.
2. 🎬 Animate the in-between. Still in Flow, choose Frames to Video: First + last, upload both images, add a short motion prompt (for example, "slow smooth 360 rotation"), and let it generate every frame between your start and end. Keep the clip short, two to four seconds is the sweet spot. Download it.
3. ✂️ Slice the clip into frames. Go to ezgif.com/video-to-jpg, upload the clip, choose Video to JPG (image sequence), set the frame rate to 30fps, convert, then click Download frames as ZIP. The maths is simple: 30fps times the length of your clip, so an eight-second clip gives you about 240 numbered images. Unzip it and keep the folder tidy, because the file numbering is what the code counts on.
4. 💻 Hand the folder to Claude. Drop the whole frame folder into your project and paste the build prompt below. Claude writes the canvas code that links your scroll position to the frames. Full zero-to-running steps for Claude Code are two sections down if you have never opened it.

The two image prompts 🖼

Step 1 lives or dies here, so do not freestyle it. The trick: both prompts are word for word identical except the one thing that changes (assembled versus taken apart). That is what keeps the product, camera and lighting matching across both frames, which is what keeps the in-between animation clean.

Start frame, your product assembled:

High-end studio product photograph of [YOUR PRODUCT], fully assembled and intact, floating dead center against a seamless matte light-grey studio background. Straight-on view, perfectly level camera, soft even studio lighting, one subtle soft shadow directly beneath the product, photorealistic, ultra sharp, high detail. Keep the product small enough in frame that there is generous empty space on every side. No text, no watermark, no hands, no props, no brand logos. Landscape 16:9.

End frame, the same product taken apart:

High-end studio product photograph of the same [YOUR PRODUCT] as a clean exploded view: the outer shell or casing lifted apart and every major part and layer separated and floating in an organized, evenly spaced arrangement along one axis, like a technical teardown render. Same straight-on view, same perfectly level camera, same soft even studio lighting, same seamless matte light-grey studio background, one subtle soft shadow beneath. The core body of the product stays in the exact center at the same size, with the parts spreading outward around it. Photorealistic, ultra sharp, high detail. No text, no watermark, no hands, no props, no brand logos. Landscape 16:9.

Swap the bracket for anything: a smartphone, a mechanical watch, a film camera, an espresso machine, a sneaker. "Exploded view" is the magic phrase, it is the technical name for those pulled-apart product renders and image models know it well. For the end frame, name the four to six parts you want visible (for a phone: battery, circuit board, camera module, speaker, tiny screws; for a sneaker: outsole, midsole, insole, upper, laces; for an espresso machine: boiler, portafilter, pump, casing panels) so the model does not invent mush.

Then the motion prompt for step 2 (for a teardown like this one):

The product slowly comes apart into an exploded view: the casing separates and the internal parts spread outward smoothly and evenly, at a constant unhurried speed with no easing at the end. Camera locked completely in place, no push in, no orbit, no handheld drift. Background unchanged and evenly lit throughout, and no new objects, text or reflections enter the frame at any point.

The build prompt 📋

Put your unzipped frame folder inside your project folder, then paste this.

Using the folder of numbered image frames in this project, build a scroll-linked image sequence on an HTML canvas, the same technique Apple uses on its product pages. Read the folder to work out the exact file naming pattern and the total frame count rather than assuming either, then preload every frame before the animation starts and show a simple loading state until they are ready.

Map scroll position to frame index so the animation steps forward and backward frame by frame as I scroll. Use GSAP with ScrollTrigger, pin the canvas while the sequence plays, and scrub it smoothly so there is no stutter between frames. Size the canvas for high-DPI screens, keep the subject centered and sharp on mobile, and make the pinned section height proportional to the frame count so the scrub speed feels natural.

Respect prefers-reduced-motion by falling back to a single static frame. Give me one self-contained HTML file I can drop straight into my site, with the frame folder path set as a variable at the top so I can change it in one place. Then explain in three lines what I would edit to swap in a different frame folder later.

Doing step 4 in Claude Code, from zero 👩‍💻

You do not have to use Claude Code, any Claude chat that accepts file uploads can write this file for you. Claude Code is smoother because it can see the actual frame folder and count the files itself, which removes the most common bug in this build.

1. 📁 Make a project folder. Create an empty folder on your desktop, call it something like scroll-site, and move your unzipped frames folder inside it so the structure is scroll-site/frames/.
2. ⬇️ Install Claude Code. Follow the official quickstart at code.claude.com/docs/en/quickstart, which covers installing it and signing in with your Claude account. It runs in your terminal, and you do not need to know any terminal commands beyond the two below.
3. ▶️ Open the folder and start it. In your terminal, type cd, a space, then drag the scroll-site folder onto the terminal window and hit enter. Then type claude and hit enter. You are now in a chat that can see your frames.
4. 📋 Paste the build prompt. Paste the prompt from the section above exactly as written and let it work. It will create the HTML file in your folder and tell you what it named it.
5. 👀 Look at it. Ask "open this in my browser so I can see it" and scroll the page. If the animation moves with your scroll, you are done. If not, the fixes are in the next section.

The four things that usually go wrong 🔧

3 bonus prompts to run next 🎁

Once the scroll sequence works, these turn one animation into a finished section. Same project, same tool.

Add a parallax section directly above my scroll sequence: a background layer, a midground product image, and headline text that each move at slightly different speeds as I scroll, so the section reads as having real depth rather than being flat.

Use GSAP with ScrollTrigger and keep the motion subtle, no more than a small offset on each layer, because heavy parallax reads as cheap. Make sure the layers still stack cleanly on mobile and that the headline never overlaps the product image at any breakpoint. Respect prefers-reduced-motion by disabling the layer offsets entirely.

Build a sticky-scroll section where the visual on the right stays pinned while three blocks of copy scroll past on the left, and each block fades up and highlights as it becomes the active one, like the feature walkthroughs on a product page.

Use GSAP ScrollTrigger for the pinning and the active-state changes, and make the pin release cleanly at the end of the third block with no jump. Stack it into a single column on mobile with the visual above the copy so nothing overlaps, and keep the copy blocks readable at 390px wide.

Add a hover animation to my product cards: on hover the card lifts slightly, a soft shadow grows underneath it, the image scales up a touch inside its frame without spilling outside, and a call-to-action fades in from the bottom of the card.

Use GSAP for the timing so it feels springy rather than janky, and keep the whole transition under 300ms. Respect prefers-reduced-motion by leaving only the shadow change, and give touch devices a tap state instead of a hover state so the cards are not stuck mid-animation on mobile.

How to get the most out of it 🎓

1. 🎯 Lock your two frames before you animate. The whole effect lives or dies on the start and end images. Same subject, same camera angle, same background, so only the motion changes. If frame one and frame two look like two different products, the in-between will look like mush.
2. 🐢 More frames means smoother, but heavier. 30fps on a two to four second clip is the sweet spot. Longer or higher gives you buttery motion and a heavy page, so compress before you decide the effect is broken.
3. 🪜 New to this? Paste the build prompt exactly as written. You do not need to read the code. Drop the folder, paste the prompt, and ask for a preview so you can see it working before you touch anything.
4. 🧠 Comfortable already? Feed it your real page. Paste your existing site code or design tokens first, tell it your section width, fonts and breakpoints, and have it match your stack (React, a Webflow embed, plain HTML) instead of generating a generic file.

The honest bit ✅