Interacciones y animación

Las interacciones animan tu página con GSAP y sus plugins (ScrollTrigger, SplitText, ScrambleText, MotionPath, CustomEase), el motor detrás de muchos sitios premiados. Cada interacción tiene un disparador y una línea de tiempo de pasos.

Empieza desde un preset

Selecciona un elemento, abre la pestaña Interactions del inspector, presiona Add y elige un preset.

Disparadores

Cualquier interacción también se puede reproducir desde un flujo de trabajo con el paso Play interaction, sea cual sea su disparador.

Disparadores de scroll

Un disparador Scroll into view usa GSAP ScrollTrigger. On es el elemento que lo inicia.

• Start y End reciben dos palabras: un punto del elemento y luego un punto de la ventana. top 80% empieza cuando la parte superior del elemento llega al 80% de la altura de la ventana. bottom top termina cuando su parte inferior sale por arriba de la ventana. También funcionan desplazamientos como top bottom-=100. Deja End vacío para usar el final automático.
• Scrub ata la animación a la posición del scroll: avanza cuando haces scroll hacia abajo y retrocede cuando haces scroll hacia arriba, entre Start y End. Parallax lo usa.
• Sin scrub, la animación se reproduce una vez cuando el elemento llega a Start y se queda en su estado final.

Construye la línea de tiempo

Abre una interacción para ver sus pasos. Cada paso tiene estas filas:

Valores de las propiedades

Cada propiedad tiene un campo adecuado para ella, con la unidad visible:

Arrastra el ícono de un campo numérico para ajustar su valor. Un paso marcado con una advertencia tiene un valor que no se puede reproducir; ábrelo para ver el problema listado debajo de los pasos.

Staggers

Un paso anima cada elemento que coincide: cada ítem de una lista de colección o cada pedazo de un texto dividido. Stagger escalona sus tiempos de inicio.

• Each define los segundos entre un elemento y el siguiente. Total define los segundos para todos juntos, sin importar cuántos sean.
• From elige dónde empieza la cascada: Start, Center, End, Edges o Random.
• Grid escalona según la distancia en una cuadrícula de ítems, como tarjetas en filas, para que la cascada se extienda en dos direcciones desde From.

"ix_cards": {
  "trigger": { "type": "scroll", "target": "n_list", "start": "top 80%" },
  "timeline": [
    { "target": "n_card", "from": { "y": 60, "autoAlpha": 0 }, "stagger": { "each": 0.08, "from": "center", "grid": "auto" }, "duration": 0.6 }
  ]
}

Un stagger que solo tiene Each desde Start se guarda como un número ("stagger": 0.1).

Efectos

Effect agrega un plugin de GSAP al paso. Elige uno por paso:

Un texto que se revela por caracteres:

{ "target": "n_h1", "from": { "yPercent": 100 }, "split": { "type": "chars", "mask": true }, "stagger": 0.03, "duration": 0.6 }

Eases

Ease define cómo cambia la velocidad durante el paso. La lista tiene los eases de GSAP (power2.out, back.out(1.7), elastic.out(1, 0.3) y más), además de:

• rough: un movimiento tembloroso e irregular.
• slow(0.7, 0.7, false): rápido, luego lento en el medio, luego rápido.
• expoScale(0.5, 7): para cambios de escala que deben sentirse parejos, como un zoom.
• Custom curve…: muestra una fila Curve. Escribe un cubic-bezier como cuatro números (0.25, 0.1, 0.25, 1, igual que cubic-bezier() de CSS) o datos de trazado SVG del visualizador de eases de GSAP. Elige un ease con nombre para volver.

Vista previa

En el modo de diseño, los elementos están en su estado final para que puedas editarlos. Usa el botón de reproducir de una interacción para previsualizarla, o presiona ⌘↵ para previsualizar toda la página.

Panel de línea de tiempo

El panel de línea de tiempo muestra los pasos de una interacción como barras sobre una regla en segundos, para que veas y cambies los tiempos de un vistazo. Funciona en el modo de diseño; en la vista previa se ejecutan las interacciones reales.

• Ábrelo con el botón Timeline de la barra de herramientas o con ⌥T. En la pestaña Interactions del inspector, el botón Open in timeline de una interacción abre el panel en esa interacción. El panel se acopla debajo del lienzo; arrastra su borde superior para hacerlo más alto o más bajo, y recuerda la altura.
• Elige la interacción en el menú de arriba a la izquierda. Una etiqueta a su lado muestra su disparador.
• Recorre la animación. Presiona o arrastra sobre la regla o sobre un espacio vacío de las pistas para mover el cabezal de reproducción, y el lienzo muestra la animación en ese momento. Con la regla enfocada, las flechas mueven el cabezal 0.01 s (mantén ⇧ para 0.1 s), y Home / End saltan al inicio o al final.
• Reprodúcela. Los controles de reproducción muestran el tiempo actual y el total, con Go to start, Play, Go to end, Loop y la velocidad de reproducción (0.25x, 0.5x, 1x o 2x; haz clic para cambiarla).
• Haz zoom con los botones Zoom in, Zoom out y Fit timeline, o con ⌘ + scroll sobre las pistas.

Editar pasos en la línea de tiempo

• Arrastra una barra para mover el paso en el tiempo, y arrastra su borde derecho para cambiar su duración. Los bordes se ajustan a 0, al cabezal de reproducción y a las otras barras; mantén ⌥ para desactivar el ajuste. Un arrastre es un paso de deshacer.
• La columna de capas de la izquierda nombra el objetivo de cada paso. Haz clic en un nombre para seleccionar esa capa (Shift o ⌘ + clic la agrega a la selección). Las filas de las capas seleccionadas se resaltan.
• Con el teclado, haz clic o llega con Tab a una barra, y luego usa ← / → para mover el paso 0.01 s (mantén ⇧ para 0.1 s), ⌥← / ⌥→ para cambiar su tamaño y ⌥↑ / ⌥↓ para subirlo o bajarlo en la lista. ↵ selecciona su capa, ⌦ o ⌫ elimina el paso y ⌘D lo duplica. Las pulsaciones de flechas sobre una misma barra cuentan como un paso de deshacer.
• Haz clic derecho en una barra para ver Select layer, Duplicate step, Move up, Move down y Delete step.
• Las herramientas de pasos en el encabezado del panel: Add step agrega un paso para la capa seleccionada (o para la capa del paso activo cuando no hay nada seleccionado), y para el paso activo puedes definir el ease, Duplicate step o Delete step. Una interacción siempre conserva al menos un paso.
• Los staggers se muestran como una cola después de la barra, con el tamaño que corresponde a la cantidad real de elementos que anima el paso, como los ítems de una lista de colección o los pedazos de un texto dividido. La cola de un stagger Grid es una estimación.

Probar el disparador

• Las interacciones Hover tienen Hover in, que reproduce la línea de tiempo hacia adelante, y Hover out, que la reproduce hacia atrás desde el cabezal.
• Las interacciones Click tienen Simulate click, que reproduce la línea de tiempo hacia adelante; cuando el cabezal está al final, la reproduce hacia atrás, como un segundo clic.
• Las interacciones Scroll que se sincronizan con el scroll muestran el cabezal como un porcentaje de scroll recorrido.

Por punto de quiebre

Una interacción se puede limitar a algunos puntos de quiebre, por ejemplo un parallax solo en escritorio.

¿Quieres que una interacción empiece desde la lógica, por ejemplo después de enviar un formulario? Usa el paso de flujo de trabajo Play interaction.