Saltar al contenido principal

Solución de problemas / Preguntas frecuentes

Un índice rápido de las preguntas y problemas más comunes. La página de cada familia de animación también tiene su propia sección "Problemas comunes" con incidencias específicas de esa familia — esta página es para preguntas generales y problemas transversales que no pertenecen a una sola familia.

General​

¿Fancy Animations ralentiza mi sitio? Cada función adicional (Mouse, Text, Gradient background) está desactivada por defecto y solo carga su script y su CSS cuando la activas. Activar el archivo CSS optimizado una vez que has terminado de construir una página recorta la hoja de estilos a solo las clases que realmente están en uso.

¿Funciona con un plugin de caché o una CDN? Sí. Las lecturas de ajustes ya añaden cabeceras anti-caché y "no store", así que una capa de caché no puede servir una copia desactualizada de tus ajustes justo después de guardar. Si una animación recién guardada no aparece de inmediato, consulta el archivo CSS optimizado — eso es una caché aparte y deliberada que se reconstruye poco después de cada guardado, no un fallo. La caché de página por sí sola no da problemas. Pero dos funciones de optimización que traen casi todos los plugins de rendimiento necesitan excluir Fancy Animations: retrasar el JavaScript y eliminar el CSS no usado — consulta Plugins de caché y optimización más abajo.

¿Necesito Bricks Builder para usar este plugin? No — funciona con Bricks, Etch o el editor de bloques nativo de WordPress (con "Gutenberg blocks support" activado). La mayoría de los sitios usan solo uno de los tres.

¿Qué pasa con mis animaciones si mi licencia caduca? Nada cambia en el frontend — una licencia activa solo condiciona las actualizaciones automáticas, el soporte y (novedad en la 3.2.0) la función Asistentes de IA vía MCP. Nunca afecta a si las animaciones ya construidas en tus páginas siguen funcionando.

¿Hay alguna forma de que un visitante desactive todas las animaciones por sí mismo? Los sitios con Bricks pueden añadir el elemento Toggle Animations a una página (consulta Notas por constructor) — un control de cara al visitante que recuerda su elección en una cookie de larga duración.

Plugins de caché y optimización​

La caché de página, la minificación y las CDN funcionan con Fancy Animations tal cual. Dos funciones de optimización necesitan excluirlo:

  • Retrasar el JavaScript (delay JavaScript) no ejecuta ningún script hasta que el visitante mueve el ratón, hace scroll o toca la pantalla. Hasta entonces las animaciones de scroll no se mueven, las escenas fijas no se fijan y las animaciones de entrada aparecen sin animar o parpadean cuando los scripts por fin arrancan.
  • Eliminar el CSS no usado (remove unused CSS) conserva solo el CSS cuyas clases encuentra en el HTML de la página. Fancy Animations añade algunas de sus clases en el navegador, después de cargar la página, así que sus reglas se pierden y las animaciones fallan o no terminan.

Los scripts de Fancy Animations ya se cargan aplazados y son ligeros, así que excluirlos casi no cuesta nada. Añade estas líneas a cada campo de exclusión, una por línea:

fancy-animations
fba_
fanim

fancy-animations coincide con los archivos del plugin y con el CSS que genera en wp-content/uploads/fancy-animations/; fba_ y fanim, con los pequeños scripts en línea que añade a cada página.

LiteSpeed Cache​

  • Page Optimization → Tuning → JS Deferred/Delayed Excludes: añade las tres líneas. Hace falta cuando JS Settings → Load JS Deferred está en Deferred o Delayed.
  • Page Optimization → Tuning → Guest Mode JS Excludes: añade las tres líneas si usas Guest Mode.
  • Page Optimization → Tuning CSS → UCSS Inline Excluded Files: añade fancy-animations. Hace falta cuando CSS Settings → Generate UCSS está activado; así el CSS del plugin se mantiene entero en vez de recortarse.

WP Rocket​

  • File Optimization → Delay JavaScript execution → Excluded JavaScript Files: añade las tres líneas.
  • File Optimization → Remove Unused CSS → CSS safelist: añade /wp-content/plugins/fancy-animations/(.*).css y /wp-content/uploads/fancy-animations/(.*).css.

Perfmatters​

  • JavaScript → Delay JavaScript: con Delay all scripts, añade las tres líneas en Excluded from delay.
  • CSS → Remove Unused CSS → Excluded Stylesheets: añade fancy-animations.

Otros plugins​

Cualquier otro plugin de rendimiento con una opción para retrasar el JavaScript o eliminar el CSS no usado funciona igual: busca su campo de exclusiones y añade las mismas líneas. Después de cambiar los ajustes, vacía la caché del plugin y abre una página con animaciones en una ventana privada, sin mover el ratón antes.

Accesibilidad y movimiento reducido​

¿Esto respeta "prefers-reduced-motion" automáticamente? No, a menos que lo actives — consulta Movimiento reducido. Está desactivado por defecto, así que todos los visitantes ven todas las animaciones a menos que cambies ese ajuste; activarlo hace que las animaciones de entrada y de texto se muestren ya en su estado final, y omite las transiciones de página, para los visitantes cuyo propio sistema pida menos movimiento. Las animaciones de scroll trigger se dejan deliberadamente intactas por este ajuste, ya que el progreso del scroll a menudo decide qué contenido es siquiera visible en primer lugar.

Scroll trigger, escenas fijadas y CSS personalizado​

Consulta las secciones "Problemas comunes" de Scroll trigger, Matemáticas del scroll y CSS personalizado, Escenas fijadas y Sequence / Index / Cover para problemas como ventanas que parecen no hacer nada, progreso que se desvía, o una escena que no se queda fijada en Safari.

Entrada, stagger y texto​

Consulta Entrada, Stagger y Texto para problemas como un elemento que salta justo después de animarse, un stagger que no se escalona en cascada, o enlaces en línea que desaparecen de un texto dividido.

Hover, ratón, fondo y cursor​

Consulta Hover, Mouse, Background y Cursor personalizado para problemas como una transición de hover que no responde dentro de un elemento animado por scroll, o el cursor personalizado que parece no hacer nada mientras pruebas en un constructor (nunca se ejecuta ahí — consulta Notas por constructor).

Bricks: trabajar con CSS personalizado​

Un puñado de peculiaridades específicas de Bricks aparecen en casi todas las recetas de este sitio que usan CSS personalizado, así que se recopilan aquí en un solo sitio:

  • Una regla específica de un breakpoint dentro de un bloque @media escrito a mano pierde frente a la regla base. Bricks mueve cada bloque @media (y @supports) del CSS personalizado de un elemento a la parte superior de la hoja de estilos generada al guardar — así que una regla pensada para anular algo más adelante en el archivo ahora va primero, y pierde por el orden de origen. Prefiere el propio campo de CSS personalizado por breakpoint del elemento (por ejemplo, "Custom CSS — Mobile Landscape") en lugar de una regla @media escrita a mano; si escribes una, antepón a su selector una clase ancestro para que su especificidad gane independientemente del orden.
  • Un bloque %root% { … } sale con llaves descompensadas. Bricks mueve las propiedades CSS simples dentro de un bloque %root% {} a sus propios controles nativos al guardar (esperado), pero malinterpreta un valor alternativo var(--x, rgba(…)) específicamente dentro de border, background o color y puede dejar CSS roto. Usa valores simples (no un alternativo var()) para esas tres propiedades dentro de %root%.
  • Un valor de border o mask-image se rompe. Cualquier función CSS que tenga comas anidadas dentro de otra función — color-mix(…), o linear-gradient(… calc(…) …) — puede romperse de la misma forma. Calcula el valor primero en su propia propiedad personalizada (--card-border: color-mix(…);) y escribe la propiedad real con un simple var(--card-border).
  • Se rechaza una subida de SVG, o aparece "Invalid signature". Subir archivos SVG necesita el permiso "Upload SVG" por rol en Bricks → Settings → Builder access — pide a quien administre el sitio que lo active. Usa siempre el origen File para un SVG que necesite CSS personalizado para llegar a sus trazos (recetas como dibujo de líneas SVG y Mapa del recorrido dependen de esto) — nunca el origen Code, que requiere una firma de código específica de ese sitio en concreto.
  • Una imagen falla al importarse desde una URL. La ruta de la URL necesita terminar en una extensión de archivo real (…/photo.jpeg?w=1920 funciona; una URL como photo-123?… sin extensión en la ruta se rechaza).
  • Después de guardar, comprueba el renderizado. La propia comprobación de renderizado de Bricks debería informar una sintaxis CSS compensada — consulta Notas por constructor.

¿Sigues atascado?​

Cada página de familia de animación en Familias de animación y cada montaje en Recetas avanzadas termina con su propia sección "Problemas comunes", escrita a partir de incidencias reales ya resueltas antes — consulta primero la página concreta de la función con la que estás trabajando.