Tracking In
También llamado Text Tracking In, Letter-spacing In
Las letras empiezan muy separadas y tenues, y se juntan hasta el espaciado normal mientras aparecen.
Se usa en
Entrada de titulares
Variantes
- expand
- contract
Prompt
Sustituye [dónde] por la parte de tu página y pega el prompt en tu agente de IA. Cada prompt incluye el nombre de la animación, así la próxima vez puedes pedirla solo por su nombre.
Añade una animación de texto "Tracking In" (también llamada text tracking in o letter-spacing in) en [dónde].
Las letras deben empezar muy separadas y tenues, y juntarse hasta el espaciado normal mientras se vuelven totalmente visibles: suave, frenando al final.
Mantén el texto centrado y en una sola línea mientras cambia el espaciado para que el diseño de alrededor no se mueva, y muéstralo con el espaciado normal si el usuario prefiere movimiento reducido (prefers-reduced-motion).Animaciones parecidas
ABCD
Blur In
También llamado Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
El elemento empieza muy desenfocado y se va enfocando, a menudo mientras se desliza o aparece.
Se usa en
Titulares y textos hero que se revelan
Añade una animación de entrada "Blur In" (también llamada text focus in, focus in o blur text reveal) en [dónde].
El contenido debe empezar muy desenfocado y transparente, y luego enfocarse en su sitio: suave y más bien lento, sin desplazamiento.
Reprodúcela una sola vez y muestra el texto nítido de inmediato si el usuario prefiere movimiento reducido (prefers-reduced-motion).ABCDEF
Split Text Stagger
También llamado Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
Un título se divide en caracteres, palabras o líneas que se animan una tras otra con un pequeño retraso.
Se usa en
Titulares y títulos de sección
Añade una entrada "Split Text Stagger" (también llamada letter stagger o staggered text reveal) en [dónde].
Divide el título en letras que suban y aparezcan una tras otra con un breve retraso entre ellas, rápido y suave, sin rebote.
Reprodúcela una sola vez cuando el título entre en pantalla, haz que los lectores de pantalla lo lean como una sola palabra y muéstralo sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).ABCDEF
Pasa el ratón por encima
Letter Scatter
También llamado Explosive Letter Burst, Scatter Gather Letters
Las letras salen volando al pasar el puntero y regresan, o estallan hacia fuera al entrar.
Se usa en
Enlaces lúdicos
Añade un efecto hover "Letter Scatter" (también llamado scatter gather letters o explosive letter burst) en [dónde].
Cuando el puntero pase sobre el texto, cada letra debe salir disparada un poco en su propia dirección con un leve giro, y luego volver a reunirse suavemente en la palabra cuando el puntero se vaya.
Mantén fijo el espacio de la palabra en el diseño mientras las letras se mueven, haz que los lectores de pantalla la lean como una sola palabra y muestra el mismo efecto con el foco del teclado.ABCDEF
Pasa el ratón por encima
Variable Font Weight Animation
También llamado Font Weight Shift, Breathe Variable Font Animation, Font Transition on Hover
Las letras se vuelven más gruesas o más finas con suavidad (o cambian de ancho o inclinación) mediante los ejes de una fuente variable.
Se usa en
Títulos interactivos
Añade un efecto hover "Variable Font Weight Animation" (también llamado font weight shift) en [dónde].
Mientras el puntero esté sobre el texto, las letras deben engrosarse una tras otra en una onda suave de izquierda a derecha y volver a adelgazar cuando el puntero salga.
Usa una fuente variable para que el grosor cambie con suavidad en lugar de saltar, evita que el título empuje el contenido cercano al ensancharse y muestra el mismo efecto con el foco del teclado.Más en Entrance & Exit
A
Zoom In
También llamado Scale In, Zoom In Up, Zoom In Down
El elemento crece desde un estado pequeño y transparente hasta su tamaño completo mientras aparece.
Se usa en
Modales, lightboxes de imágenes, popovers
Añade una animación de entrada "Zoom In" (también llamada scale in) en [dónde].
El elemento debe crecer de pequeño y transparente a su tamaño completo mientras aparece: rápido y suave, sin pasarse de tamaño.
Escálalo desde su centro sin afectar al diseño que lo rodea, y muéstralo en su sitio sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).A
Zoom Out
También llamado Scale Out
El elemento se encoge y se desvanece hasta desaparecer.
Se usa en
Cierre de modales y descarte de elementos
Añade una animación de salida "Zoom Out" (también llamada scale out) en [dónde].
El elemento debe encogerse hacia su centro mientras se desvanece hasta desaparecer: rápido, acelerando al irse.
Quítalo del diseño y del foco del teclado solo cuando haya desaparecido, y ocúltalo al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).A
Back In
También llamado Back In Up, Back In Down
El elemento empieza reducido y desplazado, y luego entra deslizándose mientras crece hasta su tamaño completo.
Se usa en
Elementos hero y tarjetas
Añade una animación de entrada "Back In" (también llamada back in up o back in down) en [dónde].
El elemento debe llegar desde fuera de un borde, reducido y algo transparente, y crecer hasta su tamaño completo al alcanzar su sitio: un movimiento deliberado en dos pasos, no una aparición rápida.
Reprodúcela una sola vez y muestra el elemento en su lugar sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).