Je kent die scrollanimaties op Apple's productpagina's — waarbij je naar beneden scrollt en het product rondraait, zichzelf opbouwt, of frame voor frame uiteen valt?

Bureaus vragen duizenden euro's om die te bouwen. Normaal vereist het een 3D-artiest die een lange beeldreeks rendert en een developer die dat aan de scroll koppelt. Het ziet er duur uit omdat het dat normaal ook is.

Dit is de snelkoppeling. Je genereert het begin en einde van de animatie met AI, laat AI elk tussenliggend frame invullen, snijdt die clip op in losse afbeeldingen, en geeft die map aan een AI-codetool die alles aan je scroll koppelt. Vier stappen, nul code — en het resultaat is exact de techniek die Apple gebruikt op de AirPods-pagina.

Wat je na deze cursus kunt: Een werkende scrollgekoppelde productanimatie bouwen met AI-gegenereerde frames, zonder één regel code zelf te schrijven.

Wat je eigenlijk bouwt

Een scrollgekoppelde beeldreeks. In plaats van een video die vanzelf afspeelt, heb je een stapel stilstaande frames op een canvas — en de scrollpositie bepaalt welk frame te zien is. Scroll naar beneden: een frame verder. Scroll terug: een frame terug.

Daardoor voelt het alsof je de animatie zelf fysiek aanstuurt. Dit is precies de techniek achter high-end productpagina's.

De vier stappen

1 Genereer twee frames in Google Flow

Ga naar labs.google/flow en genereer twee afbeeldingen via een tekstprompt: een startframe (hoe de animatie begint) en een eindframe (hoe die eindigt). De exacte prompts staan hieronder.

Houd het onderwerp, de camerahoek en de belichting consistent tussen beide frames — zodat alleen het element dat je wil animeren daadwerkelijk verandert.

2 Animeer de tussenliggende frames met Frames to Video

Kies in Flow voor Frames to Video: First + last, upload beide afbeeldingen, voeg een korte motionprompt toe (bijv. "slow smooth 360 rotation") en laat Veo elk frame ertussenin genereren. Download de clip.

3 Knip de clip in frames via EZGIF

Ga naar ezgif.com/video-to-jpg, kies Video to JPG (image sequence), stel 30fps in, converteer, en klik op Download frames as ZIP. Pak het bestand uit — je hebt nu een genummerde map met afbeeldingen, één per frame.

4 Geef de map aan een AI-codetool

Sleep de map met frames naar een AI-codetool (Claude Code, Cursor, of wat je gebruikt) en plak de megaprompt verderop in dit artikel. De tool schrijft de code die je scroll aan de frames koppelt — jij typt niets zelf.

De twee afbeeldingsprompts

Stap 1 bepaalt het resultaat, dus improviseer hier niet. Beide prompts zijn woord voor woord identiek, behalve het ene element dat verandert. Zo blijven het product, de camera en de belichting consistent — en blijft de animatie ertussenin strak.

Startframe — je product, in elkaar gezet:

High-end studio product photograph of [JE 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.

Eindframe — je product als exploded view:

High-end studio product photograph of the same [JE 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.

Vervang de haakjes door wat je wilt: een smartphone, een mechanisch horloge, een filmcamera, een espressomachine, een sneaker. "Exploded view" is de sleutelterm — het is de technische naam voor uitgespreide productvisualisaties, en AI-beeldmodellen herkennen die goed.

Noem voor het eindframe de 4 à 6 onderdelen die zichtbaar moeten zijn, zodat het model niets verzint:

  • Telefoon: batterij, printplaat, cameramodule, luidspreker, kleine schroefjes
  • Sneaker: buitenzool, tussenzool, binnenzool, bovenwerk, veters
  • Espressomachine: boiler, portafilter, pomp, behuizingspanelen

Drie consistentietips: Genereer het startframe eerst en ga pas verder als je tevreden bent. Als Flow het toelaat het eerste frame te hergebruiken bij het eindframe, doe dat. En als de twee frames eruitzien als twee verschillende producten, genereer het eindframe opnieuw — een retry hier is goedkoper dan het uitvechten in de videostap.

Motionprompt voor stap 2 (teardown animatie):

The product slowly comes apart into an exploded view: the casing separates and the internal parts spread outward smoothly and evenly. Camera locked in place, background unchanged.

De megaprompt

Sleep je map met frames naar je AI-codetool en plak dit eronder:

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.

3 bonusprompts voor daarna

Zodra de scrollsequentie werkt, zetten deze drie prompts één animatie om in een complete gepolijste sectie. Zelfde project, zelfde AI-codetool.

+ De parallaxsectie

Add a parallax section above my scroll sequence: a background layer, a midground product image, and headline text that all move at slightly different speeds as I scroll, so the section feels like it has depth. Use GSAP and ScrollTrigger, keep the motion subtle and smooth, and make sure it still reads cleanly on mobile.

+ De sticky-scroll reveal

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 and highlights as it becomes active, like the feature walkthroughs on a product page. Use GSAP ScrollTrigger, and stack it to a single column on mobile so nothing overlaps.

+ De hover-animatie

Add a hover animation to my product cards: on hover the card lifts slightly, a soft shadow grows, the image scales up just a touch inside its frame, and a CTA fades in. Use GSAP for the timing so it feels springy not janky, respect prefers-reduced-motion, and give hover-less touch devices a tap state instead.

Hoe je er het meeste uithaal

Vergrendel je twee frames voordat je animeert. Het hele effect staat of valt met de start- en eindafbeelding. Als frame één en twee eruitzien als twee verschillende producten, wordt de tussenliggende animatie een wazige brei.

Meer frames = vloeiender, maar zwaarder. 30fps bij een clip van 2 tot 4 seconden is de sweet spot. Als het traag laadt, vraag de codetool dan om de afbeeldingen te comprimeren of elk tweede frame over te slaan.

Nieuw? Plak de megaprompt exact zoals-ie is. Sleep de map, plak de prompt, en vraag de tool: "run it and show me a preview" zodat je het ziet werken voor je iets aanraakt.

Gevorderd? Geef het je echte pagina. Plak je bestaande sitecode of design system eerst, vertel je sectiebreedtes, lettertypen en breakpoints, en laat het aansluiten op jouw stack (React, Webflow embed, plain HTML).

Eerlijk gezegd

Dit is echt hoe de pro-versie werkt — maar AI-gegenereerde frames kunnen afwijken: een logo vervormt, een reflectie flikkert, een rand wiebelt. Genereer een paar clips en kies de schoonste. Houd de animatie kort en simpel — eenvoudige onderwerpen op schone achtergronden geven het scherpste resultaat.

Klaar om je AI-business te bouwen?

GainLab begeleidt je van expertise naar een werkend aanbod — met AI als hefboom.

Start de gratis sessie →