Animaciones al hacer scroll: el efecto Apple, sin escribir una línea de código
Esas animaciones donde haces scroll y el producto gira o se va desarmando en pantalla. Las agencias cobran miles de dólares por hacerlas. Aquí tienes los cuatro pasos completos, los prompts exactos y lo que nadie te cuenta sobre las limitaciones reales.
Qué estás construyendo realmente
Antes de tocar una sola herramienta, entiende esto: no estás haciendo un video. Un video se reproduce solo. Lo que vas a hacer es una secuencia de imágenes vinculada al scroll.
Funciona así: tienes una pila de fotogramas fijos dibujados sobre un canvas. La posición del scroll decide cuál fotograma se muestra. Bajas y avanza. Subes y retrocede. Por eso da la sensación de que estás controlando la animación con el dedo — porque literalmente lo estás haciendo.
Es la misma técnica de la página de los AirPods. Y hasta hace poco requería un artista 3D renderizando la secuencia y un desarrollador conectándola al scroll. Ahí está el precio.
El atajo: genera el inicio y el final con IA, deja que la IA rellene todo lo del medio, parte ese clip en imágenes, y entrega la carpeta a una herramienta de código con IA para que la conecte al scroll.
Los cuatro pasos
Genera dos fotogramas en Google Flow
Entra a Flow y genera dos imágenes desde texto: un fotograma inicial (cómo empieza la animación) y un fotograma final (cómo termina). Los prompts exactos están más abajo, no improvises aquí.
Mantén el mismo sujeto, el mismo ángulo y la misma iluminación en ambos. Solo debe cambiar lo que quieres animar.
→ labs.google/flowAnima el medio con Frames to Video
Dentro de Flow, selecciona Frames to Video (primer fotograma + último fotograma). Sube las dos imágenes, agrega un prompt corto de movimiento, y deja que Veo genere todos los fotogramas intermedios. Descarga el clip.
El prompt de movimiento también está abajo.
Parte el clip en fotogramas con EZGIF
Sube el video a EZGIF y usa Video to Image Sequence. Configúralo a 30 fotogramas por segundo, convierte, y descarga todos los fotogramas como ZIP.
Descomprime y vas a tener una carpeta con imágenes numeradas — una por fotograma. Esa carpeta es tu materia prima.
→ ezgif.com/video-to-jpgEntrega la carpeta a tu herramienta de código con IA
Arrastra la carpeta completa de fotogramas a Claude Code (o Cursor, o Antigravity — la que uses) y pega el mega prompt de construcción que está más abajo. La herramienta genera el código que vincula el scroll con los fotogramas.
No necesitas entender el código. Necesitas revisar que funcione.
Los dos prompts de imagen
Aquí está el truco que hace que todo funcione: los dos prompts son idénticos palabra por palabra, excepto por una cosa — uno describe el producto armado y el otro lo describe desarmado.
Eso es lo que mantiene el mismo producto, la misma cámara y la misma luz en ambos fotogramas. Si cambias más que eso, la animación del medio te va a salir borrosa.
Los prompts van en inglés porque los modelos de imagen responden mejor así. Ejemplo con un teléfono:
Prompt 1 — Fotograma inicial (producto armado)
High-end studio product photograph of a modern smartphone, 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.
Prompt 2 — Fotograma final (vista explosionada)
High-end studio product photograph of the same modern smartphone as a clean exploded view: the outer shell lifted apart and every major part separated and floating in an organized, evenly spaced arrangement along one axis, like a technical teardown render. Visible parts: battery, circuit board, camera module, speaker, small screws. 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.
"Exploded view" es la frase clave. Es el nombre técnico de esos renders de producto desarmado, y los modelos de imagen lo conocen perfecto. Y fíjate que en el prompt 2 nombro las piezas (batería, placa, módulo de cámara, altavoz, tornillos). Si no las nombras, el modelo se las inventa.
Prompt 3 — Movimiento (para Frames to Video)
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.
El mega prompt de construcción
Arrastra la carpeta de fotogramas a tu herramienta de código con IA y pega esto debajo:
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.
Cambia el producto: qué piezas nombrar
El teléfono es solo el ejemplo. Puedes hacerlo con lo que quieras — pero siempre nombra entre 4 y 6 piezas visibles en el prompt del fotograma final. Sin eso, el modelo alucina.
| Producto | Piezas a nombrar en el prompt |
|---|---|
| Teléfono | battery, circuit board, camera module, speaker, small screws |
| Zapatilla | outsole, midsole, insole, upper, laces |
| Cafetera espresso | boiler, portafilter, pump, housing panels |
| Reloj mecánico | case, movement, dial, hands, crown, strap |
| Cámara | lens elements, sensor, shutter, body shell, grip |
Tres extensiones para llevarlo más lejos
Una vez que la secuencia de scroll funciona, estos tres prompts la convierten en una sección completa. Mismo proyecto, misma herramienta:
Sección con parallax
Add a parallax section above my scroll sequence: a background layer, a mid-ground product image, and a heading text that move at slightly different speeds as I scroll, so the section has depth. Use GSAP and ScrollTrigger, keep the motion subtle and smooth, and make sure it reads clearly on mobile.
Scroll fijo (sticky)
Build a sticky scroll section where the visual on the right stays pinned while three text blocks scroll past on the left. Each block fades in and highlights when active, like feature walkthroughs on a product page. Use GSAP ScrollTrigger and stack it into a single column on mobile to avoid overlap.
Animación de hover en las cards
Add a hover animation to my product cards: on hover the card lifts slightly, a soft shadow appears, the image scales up a little inside its frame, and a call-to-action button reveals. Use GSAP for the timing so it feels springy and not abrupt, respect reduced-motion preference, and map it to a press state on touch devices with no hover animation.
Cómo sacarle el máximo
- Cierra tus dos fotogramas antes de animar. Todo el efecto depende de la imagen inicial y la final. Genera primero la inicial y solo sigue cuando estés totalmente conforme. Si Flow te permite reutilizar esa primera imagen al generar la final, hazlo.
- Si los dos fotogramas parecen productos distintos, regenera el final. No intentes arreglarlo en el paso del video. Volver a generar es la solución barata.
- Más fotogramas = más fluido, pero más pesado. 30 fps en un clip de 2 a 4 segundos es el punto dulce. Si la página carga lenta, pídele a la herramienta que comprima las imágenes o que baje el frame rate.
- Si eres nuevo: copia y pega el mega prompt tal cual. No necesitas entender el código. Arrastra la carpeta, pega, y pide una vista previa antes de tocar nada.
- Si ya sabes lo que haces: pégale primero tu sistema de diseño, el ancho de la sección, tus fuentes y tus breakpoints, y pídele que se adapte a tu stack (React, embed de Webflow, HTML plano) en vez de generar un archivo genérico.
La parte honesta
Así es como funciona la versión pro. Pero los fotogramas generados por IA se desvían. Un logo se deforma. Un reflejo parpadea. Un borde tiembla. Es normal.
Qué hacer al respecto:
- Genera varios clips y quédate con el más limpio. No con el primero.
- Mantén la animación corta y simple: una rotación, un ensamblaje, una sola revelación. No una escena compleja.
- Sujetos simples sobre fondos limpios te van a dar el resultado más nítido. Siempre.
Y la limitación de fondo: esto reconstruye movimiento a partir de dos imágenes. Va a funcionar muy bien con productos y objetos. Va a costarle mucho más cualquier cosa con texto, tipografía o detalle fino que deba mantenerse legible de principio a fin.