Agrega animación

En este tutorial animas una página con presets y luego le das forma al movimiento en la línea de tiempo de interacciones: mueves y estiras pasos, los recorres y los reproduces. Necesitas una página con un hero (un titular y un subtítulo), un botón y una lista de colección de tarjetas. Las interacciones se ejecutan en la vista previa y en el sitio publicado; en modo de diseño los elementos se quedan en su estado final, así que puedes seguir editando.

Anima el hero al cargar

1. Abre la pestaña Interactions

   Selecciona el titular. En el inspector, abre la pestaña Interactions. Muestra las interacciones que tienen como destino la capa seleccionada.

2. Agrega un preset de carga

   Presiona Add y elige Fade in on load. Aparece una nueva interacción con el disparador Page load y un paso que hace aparecer el titular con un fundido.

3. Haz que también se deslice

   Haz clic en la interacción para abrirla. En el paso, la fila From contiene los valores iniciales. Presiona + (Add from property) para agregar una fila, pon su propiedad en y y su valor en 40. Ahora el titular sube 40 px mientras aparece.

4. Mira la vista previa

   Presiona el ícono de reproducir (Preview) de la interacción para reproducirla en el lienzo, o presiona ⌘↵ para ver toda la página. Presiona ⌘↵ otra vez para volver a editar.

Muestra las tarjetas al hacer scroll

1. Selecciona una tarjeta

   Selecciona la tarjeta dentro de la lista de colección. La lista repite esta tarjeta una vez por ítem, así que una animación en ella se aplica a todas las tarjetas.

2. Agrega un preset de scroll

   En Interactions, presiona Add y elige Slide up on scroll. El disparador es Scroll into view y Start es top 80%: la animación empieza cuando la parte superior del elemento disparador llega al 80% de la altura de la ventana.

3. Dispara desde la lista

   Pon On en la lista de colección. Así todo el grupo empieza en cuanto la lista entra en pantalla.

4. Escalona las tarjetas

   En la fila Stagger del paso, deja Each y pon S en 0.1. Ahora cada tarjeta empieza 0.1 segundos después de la anterior. Pon From en Center para empezar desde la tarjeta del medio.

Agrega un efecto hover

1. Agrega el preset

   Selecciona el botón, presiona Add y elige Hover scale. El disparador es Hover y On es el propio botón: crece hasta scale 1.05 cuando entra el puntero y vuelve a su tamaño cuando sale.

2. Elige dónde se ejecuta

   En Runs on, desmarca Phone. Los teléfonos no tienen un puntero con el que hacer hover, así que el efecto solo se ejecuta en Desktop y Tablet.

Ajústalo en la línea de tiempo

1. Abre la línea de tiempo

   Selecciona el titular y presiona el ícono de gráfico (Open in timeline) de su interacción. La línea de tiempo se abre debajo del lienzo. También puedes presionar ⌥T o el botón Timeline de la barra de herramientas. Elige otra interacción en el menú de arriba a la izquierda; la etiqueta junto a ella muestra el disparador.

2. Lee el panel

   La columna Layers muestra la capa que anima cada paso. La regla muestra segundos, y cada paso es una barra desde su inicio hasta su fin. Arrastra el borde superior del panel para hacerlo más alto.

3. Agrega el subtítulo

   Selecciona el subtítulo en el lienzo y presiona + (Add step) en el encabezado de la línea de tiempo. Una nueva barra hace aparecer el subtítulo después del titular.

4. Mueve y cambia el tamaño de las barras

   Arrastra la barra del subtítulo hacia la izquierda para que empiece mientras el titular todavía se mueve. Arrastra su borde derecho para alargarla. Las barras se ajustan al 0, al cabezal de reproducción y a los bordes de otras barras; mantén ⌥ mientras arrastras para desactivar el ajuste.

5. Recorre y reproduce

   Arrastra sobre la regla para mover el cabezal de reproducción: el lienzo muestra la animación en ese momento. Presiona reproducir en los controles de transporte para verla, Loop para repetirla y el botón de velocidad para alternar entre 0.25x, 0.5x, 1x y 2x.

6. Define la curva de aceleración

   Haz clic en una barra para que sea el paso activo y luego elige una curva de aceleración en el encabezado, por ejemplo power3.out. Duplicate step y Delete step están al lado.

Edita con el teclado

1. Mueve una barra poco a poco

   Haz clic en una barra para enfocarla. ← y → la mueven 0.01 segundos; mantén ⇧ para moverla 0.1. Mantén ⌥ con las flechas para cambiar su duración.

2. Reordena los pasos

   ⌥↑ y ⌥↓ mueven el paso hacia arriba o hacia abajo en la lista. ⌘D lo duplica y ⌦ lo elimina. ↵ selecciona su capa en el lienzo.

3. Usa el menú del paso

   Haz clic derecho en una barra para las mismas acciones: Select layer, Duplicate step, Move up, Move down y Delete step.

4. Mueve el cabezal con el teclado

   Haz clic en la regla y usa las flechas para mover el cabezal de reproducción paso a paso, y Home o End para saltar al inicio o al final.

Prueba el hover y el scroll

1. Reproduce el hover

   Elige la interacción de hover en el menú de la línea de tiempo. El transporte agrega Hover in, que reproduce hacia adelante, y Hover out, que reproduce hacia atrás desde el cabezal, igual que hace el sitio cuando sale el puntero.

2. Revisa la aparición al hacer scroll

   Elige la interacción de scroll. La barra de las tarjetas tiene una cola de escalonado que corresponde al número de tarjetas de la lista. Recórrela para ver cómo llegan las tarjetas una por una.

3. Cierra la línea de tiempo

   Presiona ⌥T o el botón de cerrar del encabezado. Luego mira la vista previa de la página con ⌘↵ para ver todo funcionando con disparadores reales.

Lo que aprendiste

• Los presets te dan una interacción de carga, scroll o hover funcionando en un clic; el disparador y los pasos siguen siendo editables.
• El escalonado sobre una capa repetida anima cada ítem de una lista de colección uno tras otro.
• La línea de tiempo muestra los pasos como barras que puedes arrastrar, recorrer, reproducir y editar con el teclado.

Sigue con los próximos tutoriales o lee las guías en las que se basa este: