Notas por constructor

El frontend publicado es el único lugar donde se ejecuta realmente cada función, sin excepción. El lienzo de cada constructor tiene su propio interruptor de vista previa, y unas pocas funciones nunca se ejecutan dentro de ningún lienzo en absoluto. Esta página cubre ese comportamiento específico de cada lienzo, por separado de lo que hace cada familia de animación en sí misma (cubierto en Familias de animación).

Nunca dentro del lienzo de un constructor

El cursor personalizado, las transiciones de página y el scroll suave solo se ejecutan en el frontend publicado — no hay vista previa dentro del lienzo para ninguno de estos tres, por diseño.

Bricks

• Un botón de la barra de herramientas llamado FA ("Enable/disable Fancy Animations") controla la vista previa en vivo. Está apagado cada vez que vuelves a abrir el constructor — no se recuerda entre sesiones.
• Con él apagado: los elementos de entrada y de texto se fuerzan a su estado final y visible; la hoja de estilos de animación se elimina por completo; y el scroll trigger se pausa. Cualquier cosa posicionada mediante una variable de scroll muestra su estado alternativo plano, sin animar.
• Con él encendido: las entradas se reproducen mientras haces scroll en el lienzo, el stagger se aplica en vivo, y el scroll trigger funciona con todos sus estilos.
• Los cambios de ajustes se aplican en vivo — el elemento se vuelve a renderizar al instante, sin necesidad de guardar ni recargar para ver una clase nueva en efecto.
• También hay disponible un elemento Toggle Animations para añadir a una página — un control de cara al visitante que puede usar para desactivar todas las animaciones para sí mismo, durante el resto de su sesión. Tiene sus propios ajustes para si la página se recarga al activarlo, y el texto de su etiqueta accesible.

El botón FA (arriba a la derecha de la barra de herramientas) activa Fancy Animations en el lienzo de Bricks.

Etch

• Un botón de la barra de herramientas de Fancy ("Fancy Animations: ON/OFF") controla la vista previa. Está encendido por defecto, y la elección se recuerda por navegador.
• Apagado: las entradas se muestran en reposo, el texto permanece sin dividir, el scroll trigger queda neutralizado, los efectos de ratón se reinician y la deriva de los patrones se detiene.
• El lienzo siempre carga el CSS de animación completo, incluso cuando el archivo CSS optimizado está activado para el sitio en vivo.

El panel Fancy en un elemento, en Etch.

Gutenberg

• Necesita que "Gutenberg blocks (Beta)" esté activado primero — sin eso, no aparece ningún control de Fancy en el editor de bloques en absoluto.
• En un bloque con su propia barra lateral con pestañas (Image, por ejemplo: Content / Settings / Styles), los paneles de Fancy están bajo Settings, no en la primera pestaña que se muestra. En un bloque sin pestañas (Paragraph, Heading…) aparecen directamente.
• Un botón de cabecera, Animations On / Animations Off, controla la vista previa — encendido por defecto.
• Apagado: el mismo estado neutro y sin animar que el de Etch.
• Las animaciones de texto se muestran en una capa de vista previa superpuesta en el editor — la división real en letras/palabras/líneas solo ocurre en el frontend publicado.
• El lienzo carga el mismo archivo CSS que usa el frontend, así que con el archivo CSS optimizado activado, una clase que todavía no está en el contenido guardado no tiene estilo hasta que se guarda la entrada.

Los paneles de Fancy en la barra lateral del bloque. En bloques con pestañas (Content / Settings / Styles) están bajo Settings.

Estados en los que puede estar una página publicada

Estado	Qué ve el visitante
Normal	Todo funciona
Por debajo del "Skip animations on screens narrower than" (tamaño mínimo de pantalla) del sitio	Se elimina toda la hoja de estilos de animación: los preajustes de entrada, texto, hover y scroll muestran todos su estado estático; sin cursor personalizado
"Disable from tablet/mobile" en una animación de entrada o de texto	Ese elemento muestra su estado final en ese ancho
"Disable from tablet/mobile" en un elemento de scroll trigger	Esa animación de scroll se desactiva en ese ancho
Un visitante usó el elemento Toggle Animations	Una cookie de larga duración recuerda la elección: no se carga ningún CSS ni JS de Fancy, todo se muestra estático
"Respect reduce motion" está activado y el sistema del visitante lo solicita	Las animaciones de entrada y de texto se muestran en su estado final; consulta Movimiento reducido
JavaScript bloqueado o retrasado	Los elementos de entrada permanecen invisibles hasta que se ejecuta el script del observador; el texto permanece visible pero sin dividir; los elementos de scroll muestran su estado sin animar

Comprobar una página correctamente

1. Abre la página sin haber iniciado sesión, o en una ventana de navegación privada, con cualquier caché de página borrada desde tu último guardado.
2. Haz scroll hacia abajo despacio desde el principio: cada entrada debería dispararse en su punto de activación, y cualquier cosa ya visible al cargar debería reproducirse una vez tras su retraso.
3. Vuelve a subir y bajar con el scroll para confirmar que el comportamiento de repetición (o "solo una vez") coincide con lo que configuraste.
4. Cambia el tamaño a aproximadamente 991px, 767px y 478px — los ajustes de desactivado en tablet/móvil y el número de columnas del stagger cambian en esos anchos.
5. Pasa el ratón de verdad sobre botones y tarjetas — los efectos de ratón y el cursor personalizado necesitan ambos un puntero fino, y no se muestran en pantallas táctiles.
6. Si el sitio usa un plugin de rendimiento que retrasa JavaScript, confirma que las animaciones de entrada sigan apareciendo sin que el visitante necesite hacer clic o scroll primero.

Problemas comunes

• "No se anima" mientras edito. El propio interruptor de vista previa del constructor está apagado — consulta las notas por constructor de arriba (el botón FA de Bricks siempre empieza apagado al reabrir).
• Funciona en el constructor pero no en el sitio en vivo. El archivo CSS optimizado está activado y la hoja de estilos en caché es anterior a tu último cambio — guarda la página de nuevo y recarga.
• Faltan elementos animados para algunos visitantes, pero a ti te funciona bien. Un ajuste de rendimiento que retrasa JavaScript está frenando el propio script observador del plugin — exclúyelo de cualquier optimización de retraso/combinación de este tipo.
• A ti te funciona bien, pero un cliente dice que nada se anima en absoluto. Es probable que antes usara el elemento Toggle Animations, que establece una cookie de larga duración — vuelve a activarlo, o borra esa cookie.

Bricks

• Hasta la 3.1.2, las animaciones de entrada todavía podían dispararse brevemente en el lienzo incluso con la vista previa apagada, cada vez que el propio Bricks volvía a renderizar el elemento — ese movimiento se puede ignorar, no refleja el frontend real.
• Después de guardar, la propia comprobación de renderizado de Bricks debería informar cssSyntaxBalanced: true — si no lo hace, algo en un campo de CSS personalizado (normalmente un valor alternativo var(--x, rgba(…)), o una función con comas dentro como color-mix()) se corrompió al guardar; consulta los inconvenientes específicos de Bricks en Matemáticas del scroll y CSS personalizado y las páginas de recetas.