Ajustes de animación

En wp-admin: Fancy Animations → Animation Settings (la pestaña Animations). Son los valores por defecto de todo el sitio y los módulos sobre los que se apoya cada familia de animación. No puedes cambiarlos desde dentro de una página: un visitante ve los mismos valores en todo el sitio, y un valor fijado en un elemento en Bricks, Etch o el editor de bloques siempre gana sobre estos valores por defecto.

Tiempos

Ajuste	Valor por defecto	Efecto
Animation time	1s (0–3)	Duración de cada animación de entrada y de texto que no tenga su propia duración configurada
Animation delay	0s en instalaciones nuevas (0–1)	Retraso de cada animación de entrada y de texto que no tenga su propio retraso configurado. Elige el momento de una entrada con su punto de disparo en vez de un retraso: un retraso solo adivina cuándo se verá el elemento
ScrollTrigger smoothing	100 ms en instalaciones nuevas (0–500 ms; 0 lo desactiva)	Cuánto tardan las animaciones de scroll trigger en alcanzar la posición real del scroll. Los elementos pueden anularlo

nota

Los sitios que se actualizaron desde antes de que existiera ScrollTrigger smoothing (antes de la 3.1.1) lo mantienen en 0 en lugar de 100 ms, para que una página ya publicada no cambie su movimiento por sí sola tras una actualización.

Reproducción

Ajuste	Valor por defecto	Efecto
Play entrance animations once	Off	Cada animación de entrada y de texto se reproduce solo la primera vez que se ve, en todo el sitio: lo mismo que "Only once" en cada elemento
Only on scroll down	Off	Las animaciones se disparan al bajar el scroll, y solo se reinician al volver a subir
Respect "Reduce motion"	Off	Ver Movimiento reducido más abajo
Skip animations on screens narrower than	Vacío (todas las pantallas)	Por debajo de este ancho, en px, se elimina toda la hoja de estilos de animación y se desactiva el cursor personalizado: los preajustes de entrada, texto, hover y scroll muestran su estado estático

Movimiento reducido

Desactivado por defecto: hasta que lo actives, cada visitante ve todas las animaciones sin importar su propia preferencia de sistema. Solo entra en efecto cuando ambas condiciones son ciertas: este ajuste está activado, y el sistema del visitante solicita menos movimiento (prefers-reduced-motion: reduce).

Función	Con ambas condiciones ciertas
Animaciones de entrada	Se muestran ya en su estado final: sin movimiento, sin retraso, los bucles se detienen
Animaciones de texto	Cada letra, palabra o línea se muestra de una vez; las barras de overlay-reveal quedan ocultas
Transiciones de página	Se omiten por completo
Scroll trigger, hover, mouse, gradient drift, cursor personalizado, scroll suave	No se ven afectados: el progreso del scroll a menudo decide qué contenido llega a mostrarse, así que desactivarlo podría ocultar contenido

Módulos

Cada módulo carga su propio script y CSS pequeños solo cuando está activado. Están desactivados por defecto, así que los sitios que no los usan no pagan nada por ellos.

Módulo	Peso	Sin él
Mouse	≈1 KB	No aparece ningún control de animación de Mouse, y las clases .fa--mouse-* no hacen nada
Text	1.8 KB	No aparece ningún control de animación de Texto, y el texto no se divide
Gradient background	≈1 KB	No aparece ningún control de Background
Gutenberg blocks (Beta)	—	Los paneles de Fancy no aparecen en la barra lateral del editor de bloques

Entrance, Stagger, Hover y Scroll trigger no necesitan ningún módulo: siempre están disponibles.

Salida CSS

Archivo CSS optimizado

Desactivado por defecto. Activado, el sitio solo carga el CSS de las clases de animación realmente presentes en el contenido guardado (ajustes y clases de Bricks, clases de Etch y de bloques, reglas de Global animations), reconstruido automáticamente poco después de cada guardado. Las páginas que todavía son borrador, pendientes, privadas o programadas también cuentan, así que puedes previsualizarlas antes de publicarlas.

aviso

Activa esto solo una vez que hayas terminado de añadir animaciones. Una clase que solo existe en tiempo de ejecución, o una añadida sin guardar la página desde entonces, no tiene CSS hasta que el siguiente guardado reconstruya la caché.

consejo

Este es el recorte propio de Fancy Animations. La opción "eliminar el CSS no usado" o "retrasar el JavaScript" de un plugin de rendimiento necesita excluir Fancy Animations — consulta Plugins de caché y optimización.

Etch: keyframes dentro de las clases

Solo se muestra cuando Etch está activo. Activado por defecto. Imprime los @keyframes escritos dentro de una clase de Etch donde el navegador puede leerlos, en la página y en el constructor. Si Fancy Etch ya hace esto, el ajuste se muestra desactivado con ese motivo.

Avanzado: colores de animación

Una sección colapsada con un único ajuste, Animation colors: los cuatro colores de la paleta que usan las animaciones de entrada Ring, Border y Overlay reveal, y el efecto hover ring.

Color	Valor por defecto
Primary	#FF5B3A
Secondary	#E8917A
White	#FFFFFF
Black	#15120F

Cada uno acepta un valor hex o una variable CSS (por ejemplo var(--my-color)). Elige la variante cuyo color contraste con el fondo sobre el que se usa. Una variable que no existe en el sitio deja esa variante invisible, sin ningún error: comprueba el nombre antes de apuntar un color a ella.

Ajustes relacionados en otras pantallas

Pantalla	Qué configura
Global animations	Reglas que añaden una animación a cada elemento que coincide con un selector CSS, en todo el sitio
Page transitions	El efecto reproducido entre cargas de página
Smooth scroll	Scroll suave de Lenis para todo el sitio
Custom cursor settings	Estilo, tamaño, colores y segmentación del cursor personalizado de todo el sitio

Problemas comunes

• Cada animación de entrada espera antes de empezar. El Animation delay del sitio está por encima de 0 (lo cambiaste tú, o un sitio que se actualizó desde una versión anterior): añade "No delay" por elemento, o vuélvelo a poner en 0 aquí.
• Se animan encabezados en los que nadie puso una animación. Una regla de Global animations los afecta: dale al elemento su propia animación (siempre gana), o exclúyelo en la regla.
• Faltan en el constructor los controles de texto, mouse o fondo degradado. El módulo correspondiente está desactivado aquí.
• Las animaciones de scroll se sienten lentas en un sitio y ágiles en otro. Valores distintos de ScrollTrigger smoothing, o Smooth scroll activado en uno de ellos.
• Una animación nueva funciona mientras editas pero no en el sitio en vivo. Optimized CSS file está activado y la caché es anterior a la clase nueva: vuelve a guardar la página para reconstruirla.