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.
the ideaA 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).
Two of the four steps are free, and one has a plan gate worth knowing about before you start clicking.
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.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.scrub option is the specific thing that makes the frames follow your finger instead of playing on their own. Reference: GSAP ScrollTrigger docs.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.
scroll-site, and move your unzipped frames folder inside it so the structure is scroll-site/frames/.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.frame_0001.jpg through frame_0240.jpg), and paste the same build prompt. You get the same file, you just paste it into your site yourself.0001 versus 1), and tell Claude the exact first and last filenames.scrub: 1 rather than scrub: true for a slight smoothing lag, and re-export at 30fps if you dropped lower.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.