5000$ AI Scroll Animation for Websites in 4 steps

Apple builds its product pages around a single trick: the item seems to build or take itself apart as you scroll, and your scroll is the only thing controlling it. Here is the exact four-step workflow to build that effect yourself, camera example included, with no agency and no code you have to write by hand.

The effect has a plain name once you look past the polish: a scroll-linked image sequence. A stack of still frames sits on a canvas, and your scroll position decides which one shows. Scroll down and it steps forward, scroll up and it steps back, so it feels like your thumb is moving the object rather than watching a video on its own clock. Building one by hand means a 3D artist rendering the frames and a developer wiring each one to a scroll position, which is where the invoice comes from. An AI scroll animation replaces both of them with two AI tools, one clip, and an afternoon.

See it working

The finished effect, on a real camera

Scroll past the box to watch it assemble

That box is the exact output of the workflow below, camera and all. Here is how it is built, in four steps.

The workflow

The AI scroll animation in four steps

01

Generate your two frames in Google Flow

Open Google Flow and pick Nano Banana Pro, the image model built into it, then generate two images: a start frame with your product pulled apart into an exploded view, and an end frame with it fully assembled.

why it mattersThese two frames are the only anchors the animation has. If they match on everything except the assembly itself, the next step has a clean path to fill in. If they drift, it has to guess, and that is where parts warp.

Google Flow →

Step 1 prompt

Swap the camera for your product and keep the rest. This is the Nano Banana Pro prompt, run against your assembled photo as the reference:

Create an exploded view of the exact same camera where all components are disassembled and floating in mid-air, including the lens, internal parts, metal brackets, and buttons. Even the top bracket must be separated into its constituent components. Keep the exact same framing, perspective, lighting, background, and composition as the original photo. Only the camera separates cleanly into parts, evenly spaced, with realistic proportions. Photorealistic, no distortion.

02

Animate the in-between in Higgsfield

Upload both frames to Higgsfield, choose Kling 2.6 Turbo, and set the exploded shot as the start frame and the assembled shot as the end frame. Add the motion prompt below, then let it animate every frame in between.

why it mattersA motion prompt this specific stops Kling from taking creative liberties. Naming what should not happen, no rotation, nothing new appearing, is what stops parts from spinning or duplicating partway through the clip.

Higgsfield →

Step 2 prompt

This is the motion prompt handed to Kling. It spends most of its words on what must not change:

Animate the exploded camera parts smoothly assembling into the fully built camera. All components move inward along their original positions and axes, slowly and precisely snapping into place. No new parts appear, no parts disappear, and no duplication. No rotations should occur. The angle, lighting, and background remain completely unchanged. Motion is clean, realistic, and cinematic, like a precision engineering assembly. End exactly on the fully assembled camera matching the second image. Do not change the lighting or background. No changes in lighting.

03

Slice the clip into a frame sequence

Take the finished clip to ezgif.com and use Video to JPG, its video-to-image-sequence tool. There is no prompt at this step, only settings: set the frame rate to 30fps, tick ZIP only, then convert and download all the frames as a zip. You get a numbered folder of still JPGs in the exact order the clip plays.

why it mattersA canvas sequence has nothing to do with video playback. It swaps a static image for every step of scroll, so the clip has to exist as individual stills before a coding tool can wire anything to your scroll position.

ezgif.com →

04

Drop the folder into an AI coding tool

Drop the whole frames folder into an AI coding tool such as Claude and paste the prompt below. It names GSAP and its ScrollTrigger plugin, the library that does the scroll maths, so you do not have to.

why it mattersThis is the whole mechanism behind those high-end product pages: a stack of images on a canvas element, with scroll position deciding which one paints. ScrollTrigger handles the pinning and the scroll-to-frame maths a developer would otherwise write by hand.

Claude →

Step 4 prompt

Paste this under the folder. It is the whole brief, from preloading the frames to the mobile fallback:

Using this folder of image frames, build a scroll-linked image sequence on an HTML canvas. Preload all the frames first, then map the scroll position to the frame index so the animation plays frame by frame as the user scrolls, the same technique Apple uses on the AirPods page. Use GSAP and ScrollTrigger. Pin the canvas while the sequence plays, scrub it smoothly to scroll so there's no stutter, keep it sharp and centered on mobile, and add a graceful fallback if the frames are still loading. Give me a single self-contained file I can drop straight into my site.

Where it goes wrong

Common mistakes when building a scroll animation with AI in 2026

• Letting the two frames drift. If the camera angle, lighting or background shifts even slightly between your start and end photo, Kling has to guess at the difference and parts warp or swap mid-clip instead of assembling cleanly.
• Writing a vague motion prompt. “Animate this” leaves room for the model to invent rotations, extra parts or a camera move you never asked for. Spell out what should not happen, exactly like the step 2 prompt does.
• Keeping every frame ezgif exports. Full-resolution frames at 30fps look sharp in the preview and heavy on a mobile connection. Downscale and thin out the frame count before handing the folder to your coding tool, not after.
• Skipping the loading fallback. On a slow connection, a canvas with no frames loaded yet is just a blank box. A short loading bar buys the few seconds frames need to arrive.
• Ignoring prefers-reduced-motion. Some visitors have this switched on at the OS level, and a scroll-pinned animation that ignores it can feel disorienting rather than impressive.

FAQ

Frequently asked questions

Do I need to know how to code for this?

No. The only step that touches code is the last one, and that is the part you hand to the AI coding tool. You describe what the animation should do in plain language and it writes the canvas and scroll logic for you.

Which of these tools cost money?

Nano Banana Pro inside Google Flow needs a paid Google AI plan, and Higgsfield’s Kling generations run on paid credits. ezgif.com is free, and most AI coding tools, including Claude, have a free tier that is enough to build one animation.

Can I use this for something other than a product teardown?

Yes. Any two clean, matching photos work: a shoe before and after lacing, a room empty and furnished, a dish before and after plating. The assembly example here is just the clearest way to see the technique in action.

Will this many frames slow my website down?

It will if you are not careful. Resize your frames to the size they actually display at, compress them, and thin out the frame count rather than keeping every frame ezgif exports. The demo above uses far fewer, smaller frames than a raw export for exactly this reason.

Is this really the technique Apple uses on its product pages?

Yes, at a mechanical level. Apple’s AirPods page and similar pages paint a sequence of still images onto a canvas element and swap frames based on scroll position, the same mechanism this workflow produces. Apple’s version is built by hand with a much larger frame set; this walkthrough gets you the same mechanism with AI doing the generation and the coding.