# Cómo hacer una historia animada de Instagram que retenga

[Canonical HTML page](https://gradiently.design/es/guide/animated-instagram-story)

Una historia tiene uno o dos segundos antes de que el pulgar pase a la siguiente. El movimiento adecuado se gana el resto del encuadre; el inadecuado solo hace que las palabras cuesten más de leer.

## The short version

- Una historia animada de Instagram es un vídeo de 1080×1920, normalmente un bucle corto, que se usa en lugar de una historia estática.
- Las historias animadas más legibles mantienen el fondo moviéndose despacio y hacen entrar las palabras una vez, para después dejarlas quietas.
- El primer segundo es el que más importa, así que el titular debe estar del todo en pantalla más o menos un segundo después de que se abra la historia.
- Sube las historias animadas como vídeo MP4 a 1080×1920 y no como GIF, para que los degradados sigan siendo suaves.
- Mantén el texto y los logotipos fuera de la parte superior e inferior del encuadre, donde Instagram dibuja su propia interfaz.

Una **historia animada de Instagram** funciona cuando una sola cosa se mueve con un propósito y todo lo demás sigue siendo legible. En la práctica, eso significa un fondo que se desliza despacio, un titular que entra una vez con una animación corta y luego se queda quieto, y nada importante en la parte superior o inferior del encuadre de 1080×1920. Expórtala en MP4, no en GIF, y asegúrate de que el primer fotograma ya se lea como un diseño terminado, porque algunas personas solo verán ese fotograma.

## Qué debe moverse en una historia animada

Una historia se ve un instante, con el brazo extendido y a menudo sin sonido. El movimiento atrae la mirada, así que cada cosa que se mueve compite con tus palabras. Las historias que retienen la atención eligen una sola capa en movimiento, la mantienen tranquila y dejan que el texto haga su trabajo. Las historias recargadas parecen enérgicas en el editor y agotadoras en el móvil.

### Cansa verla

- Cada línea de texto se anima de una forma distinta
- Las palabras siguen moviéndose después de entrar
- Un fondo rápido y de alto contraste detrás de un texto pequeño
- Stickers, GIF y efectos apilados en un mismo encuadre
- El titular aparece a los tres segundos

### Retiene la atención

- Un solo estilo de animación de texto para toda la historia
- Las palabras entran y después se quedan totalmente quietas
- Un fondo lento con una zona tranquila detrás de las palabras
- Un solo elemento en movimiento, elegido a propósito
- El titular se puede leer en un segundo

El mismo principio recorre todo buen trabajo de motion, de los logotipos a las webs. Si quieres la teoría que hay detrás, [principios de motion design](https://gradiently.design/es/guide/motion-design-principles) trata el ritmo, las curvas de aceleración y la jerarquía con más profundidad.

## Cuatro animaciones de texto que funcionan en historias

La animación de texto es el movimiento más útil en una historia, porque le dice a la mirada por dónde empezar. Que sea breve. Una entrada que dura más de medio segundo aproximadamente empieza a sentirse como una espera, y la gente pasa de largo las esperas.

| Animación | Qué hace | Úsala para |
| --- | --- | --- |
| Ascenso | Las palabras suben una distancia corta y se asientan | Anuncios tranquilos, citas, historias editoriales |
| Pop | Las palabras crecen con un ligero rebote | Ofertas, lanzamientos, marcas desenfadadas |
| Barrido | Una línea se revela desde un lado | Titulares con una dirección de lectura marcada |
| Máquina de escribir | Las letras aparecen una tras otra | Preguntas, adelantos, ganchos cortos de pocas palabras |

Elige una por historia. La máquina de escribir es la más lenta, así que mantén corta su línea o seguirá escribiendo cuando la gente ya haya pasado.

Escalona las líneas y no las palabras: primero el titular, la línea de apoyo un instante después y la invitación al enlace al final. Ese orden coincide con cómo lee la gente, y hace que la historia tenga sentido aunque alguien se vaya a mitad. Para más patrones, incluida la tipografía cinética, consulta [ideas de animación de texto](https://gradiently.design/es/guide/text-animation-ideas).

Historia vertical con un fondo degradado en movimiento que anuncia que un nuevo estudio abre el viernes

Primero sube el titular y después el detalle. Ambos están en la franja central, lejos de la interfaz.

Historia vertical de cuenta atrás que dice quedan dos días para una selección de primavera, sobre un degradado animado suave

Una cuenta atrás que entra con un pop una sola vez. El fondo sigue moviéndose, así que la historia sigue viva mientras las palabras se quedan quietas.

## El ritmo de una historia animada de Instagram

Una historia estática se queda en pantalla unos cinco segundos antes de que Instagram pase a la siguiente. Una historia en vídeo dura lo que dure el clip, pero la atención se concentra al principio: si el primer segundo está vacío, el resto casi nunca se ve. Planifica la línea de tiempo hacia atrás a partir de eso.

1. **De 0 a 1 segundo: el titular** El fondo ya se mueve en el primer fotograma. El titular termina su entrada al acabar el primer segundo.
2. **De 1 a 2 segundos: el apoyo** Llega la segunda línea o el producto. Usa la misma animación que el titular, con un movimiento algo menor.
3. **De 2 a 3 segundos: la acción** Aparece la invitación al enlace, la fecha o el código. Es la línea sobre la que la gente actúa, así que necesita tiempo para leerse.
4. **El resto: mantener** No entra nada nuevo. El fondo sigue deslizándose para que la historia se repita sin un reinicio visible.

Entre seis y diez segundos es una duración cómoda para una historia diseñada con un mensaje corto. Los clips más largos encajan con alguien hablando o con una demostración, no con un titular. Si la historia va a repetirse en bucle, el fondo debe terminar donde empezó, algo que se explica paso a paso en [vídeo en bucle perfecto](https://gradiently.design/es/guide/seamless-loop-video).

> **Haz del primer fotograma un diseño terminado** Las miniaturas, las vistas previas y las conexiones lentas pueden mostrar el primer fotograma por sí solo. Si tus palabras entran desde la nada, ese fotograma es un fondo vacío. Empieza con el titular parcialmente visible, o diseña el primer fotograma como una imagen fija completa.

## Tamaño, zonas seguras y ajustes de exportación

Una historia animada usa el mismo encuadre que una estática: 1080×1920 píxeles, 9:16. La interfaz de Instagram se superpone arriba y abajo, así que mantén las palabras y los logotipos en la franja central. Una regla de trabajo habitual es dejar sin texto unos 250 píxeles arriba y abajo. El desglose completo está en [tamaño de las historias de Instagram](https://gradiently.design/es/guide/instagram-story-size).

- Historia y Reel 9:16: 1080 × 1920
- Publicación del feed 4:5: 1080 × 1350
- Cuadrado 1:1: 1080 × 1080

El encuadre de la historia junto a los formatos del feed. Diseña la historia a altura completa en lugar de estirar una publicación del feed para que encaje.

| Ajuste | Recomendación | Por qué |
| --- | --- | --- |
| Formato | MP4 | Instagram reproduce vídeo de forma nativa y mantiene suaves los degradados |
| Tamaño | 1080×1920 px | Nada se reescala ni queda con franjas |
| Fotogramas por segundo | 30 fps | Lo bastante fluido para un movimiento lento, con archivos pequeños |
| Sonido | Opcional | Mucha gente lo ve sin sonido, así que las palabras deben llevar el mensaje |
| Evita | Subir GIF | 256 colores por fotograma hacen que los degradados muestren bandas |

Ajustes de exportación para una historia animada diseñada.

El GIF es el único formato que conviene evitar aquí. Su límite de 256 colores convierte los degradados suaves en franjas, y para Instagram una historia en movimiento es un vídeo, así que dale un vídeo. La comparación está en [GIF frente a MP4](https://gradiently.design/es/guide/gif-vs-mp4).

## Historias animadas que no se parecen a las de todos

La mayoría de las plantillas de historias animadas usan el mismo puñado de fondos en movimiento, así que un feed lleno de ellas se vuelve borroso. El fondo es donde se puede reconocer tu marca antes de que nadie lea una palabra. Un campo de color en movimiento que te pertenece hace más de lo que hará nunca un bucle de stock.

En Gradiently, una historia empieza sobre un **Mark**: un fondo vivo de degradado y material que se mueve por sí solo y es único. Añade tu titular, elige ascenso, pop, barrido o máquina de escribir, y el Mark mantiene su zona más tranquila detrás de las palabras mientras la tinta automática elige texto claro u oscuro línea a línea. Después, el mismo diseño puede adaptarse a una publicación del feed o a un [fondo para Reels](https://gradiently.design/es/guide/reels-tiktok-backgrounds) sin rehacerlo. La exportación de vídeo forma parte de Pro y guarda MP4 cuando tu navegador lo permite.

Historia vertical minimalista con una sola línea sobre una carta nueva sobre un degradado que se mueve despacio

Un Mark lento detrás de una sola línea quieta. El fondo se mueve; las palabras, nunca.

## FAQ

### ¿Cómo hago una historia animada de Instagram?

Diseña un encuadre de 1080×1920 con un fondo en movimiento y una sola animación de texto, mantén las palabras en la franja central, expórtalo en MP4 y súbelo como historia. La mayoría de las herramientas de diseño con exportación de vídeo pueden hacerlo.

### ¿En qué formato debe estar una historia animada de Instagram?

MP4 a 1080×1920 píxeles. Evita el GIF: su límite de 256 colores hace que los degradados muestren bandas, y de todos modos Instagram trata una historia en movimiento como vídeo.

### ¿Cuánto debe durar una historia animada de Instagram?

Para una historia diseñada con un mensaje corto, entre seis y diez segundos es cómodo. Pon el titular en pantalla en el primer segundo, porque la atención cae rápido después.

### ¿Por qué mi historia animada se ve borrosa o con bandas?

Normalmente se exportó como GIF, al tamaño equivocado o con una tasa de bits baja. Exporta en MP4 a exactamente 1080×1920 para que Instagram no tenga nada que reescalar.

### ¿El texto debe moverse todo el tiempo?

No. Deja que las palabras entren una vez y después se queden quietas. El texto en movimiento cuesta más de leer, y un fondo que se mueve despacio ya mantiene viva la historia.