Cada proyecto que construimos incluye un conjunto básico de animaciones. No porque se hayan solicitado, no porque hayamos negociado su alcance, sino porque consideramos que forman parte del aspecto de un sitio web bien construido. Más allá de esa línea de base, ofrecemos un conjunto definido de animaciones adicionales que se pueden añadir a cualquier proyecto. El punto es el mismo: un menú claro, acordado de antemano, sin conjeturas por parte de ninguna de las partes.

Este documento explica qué es cada animación, cómo se comporta y para qué sirve. Tanto si eres un cliente que está revisando lo que incluirá tu proyecto como si eres un miembro del equipo que busca el estándar a seguir, esta es la referencia.

El predeterminado: incluido en todos los proyectos

Hay un set de interacciones que se incluye en cada sitio web que creamos, por defecto.

Pasar el ratón sobre botones y enlaces

TIPO: MICROINTERACCIÓN · DISPARADOR: CURSOR HOVER

Cada elemento interactivo del sitio (botones y enlaces de texto) tiene una respuesta visual cuando el usuario pasa el ratón sobre él. No se trata de una elección decorativa. Es funcional: confirma al usuario que se puede hacer clic en el elemento.

La regla que seguimos:

• Si el elemento tiene un fondo de color sólido (un botón), el cursor cambia ese color, normalmente del color principal de la marca al secundario o a una variante más clara u oscura.
• Si el elemento no tiene fondo (un enlace de texto), el cursor ajusta la opacidad, ya sea reduciéndola ligeramente para indicar la interactividad o aumentándola si el enlace ya tiene una opacidad base reducida.

Duración de la transición: ~ 200 ms. Lo suficientemente suave como para responder, no tan lento como para que parezca lento.

Una vez que se internaliza la regla, se tarda menos de cinco minutos por componente en implementarse. No cuesta nada importante y elimina la apariencia poco refinada de un sitio en el que los elementos en los que se puede hacer clic no responden al cursor.

El menú: disponible bajo petición

Las siguientes animaciones no se incluyen de forma predeterminada, pero están predefinidas. Esto significa que no hay tiempo de diseño, ni idas y venidas sobre cómo deben comportarse, ni ambigüedad sobre lo que estás pidiendo. Cada uno de ellos se especifica a continuación. Tú eliges lo que se aplica a tu proyecto.

Aparición al desplazarse

TIPO: ANIMACIÓN DE ENTRADA · DISPARADOR: EL ELEMENTO ENTRA EN LA VENTANA GRÁFICA

A medida que el usuario se desplaza hacia abajo, las secciones y los bloques de contenido aparecen difuminados en lugar de ser visibles de inmediato. Para ello, utilizamos el activador de desplazamiento hacia la vista nativo de Webflow.

Cómo se aplica:

• El elemento principal de cada sección (normalmente el encabezado o el bloque de texto de introducción) se carga primero.
• Si los elementos están dispuestos en una fila horizontal (por ejemplo, tres cartas o columnas), un retraso escalonado hace que aparezcan de izquierda a derecha en lugar de simultáneamente.
• Si los elementos se apilan verticalmente (por ejemplo, una lista), aparecen secuencialmente de arriba a abajo con un ligero retraso entre cada uno.

Una nota sobre el contexto: los cambios de color activados por el desplazamiento son comunes en los sitios web de marcas más pequeñas y, a menudo, los clientes los solicitan específicamente. Son menos comunes en los sitios de grandes marcas con presupuestos de producción considerables, que suelen preferir diseños estáticos e inmediatos. Ninguno de los dos enfoques es incorrecto. Este está disponible, definido y listo para aplicarse siempre que el proyecto lo requiera.

Desvanecerse con un movimiento hacia arriba al desplazarse

TIPO: ANIMACIÓN DE ENTRADA · DISPARADOR: EL ELEMENTO ENTRA EN LA VENTANA GRÁFICA

Una variante de lo que aparece arriba. En lugar de aparecer en su lugar, el elemento comienza ligeramente por debajo de su posición final y va ascendiendo a medida que se desvanece. El desplazamiento es sutil: es cuestión de píxeles, no de un desplazamiento drástico.

Esto añade una sensación de profundidad y flujo direccional a la experiencia de desplazamiento. La configuración lleva un poco más de tiempo que en una pantalla simple, ya que es necesario calibrar y probar el offset en diferentes tamaños de pantalla.

Fade in/fade out para menús desplegables y acordeones

TIPO: TRANSICIÓN DE INTERFAZ · DESENCADENANTE: ACCIÓN DE APERTURA/CIERRE

Cuando se abre o cierra un componente (un acordeón de preguntas frecuentes, un menú desplegable de navegación o una pestaña de contenido), la aparición y la desaparición deben ser fluidas y no instantáneas. Aplicamos un difuminado al abrir y un difuminado al cerrar, aproximadamente a 200 ms.

La implementación depende de cómo se construya el componente:

• Menú desplegable Native Webflow: la transición de opacidad se configura directamente en los ajustes del menú desplegable. Duración establecida en ~200 ms.
• Menú desplegable o acordeón personalizado (mediante una interacción de mostrar/ocultar con display: none/display: block): se añade explícitamente una animación de atenuación de entrada y atenuación a la interacción, también a una velocidad de unos 200 ms.
• Pestañas: al cambiar de una pestaña a otra, el contenido entrante aparece difuminado en lugar de encajar en su lugar.

Barra de navegación fija con fondo activado por desplazamiento

TIPO: CAMBIO DE ESTADO DE DESPLAZAMIENTO · ACTIVACIÓN: DESPLAZARSE MÁS ALLÁ DE LA VENTANA GRÁFICA INICIAL

La barra de navegación comienza con un fondo transparente, integrado visualmente con la sección de héroes, y adquiere un fondo sólido una vez que el usuario comienza a desplazarse. Esto solo se aplica cuando el diseño incluye una barra de navegación con la parte superior transparente y cuando el cliente lo solicita o el diseño lo exige claramente.

Por qué trabajamos de esta manera

Las decisiones de animación, si se dejan abiertas, se convierten en una fuente de fricción. El diseñador no sabe qué especificar. El desarrollador no sabe qué crear. El cliente no sabe qué esperar. Todos terminan en una conversación que no tenía por qué suceder.

Definir una carta de animaciones predefinidas resuelve esto en todos los niveles:

• El equipo de desarrollo no tiene que adivinar ni preguntar: sigue una especificación conocida.
• El director del proyecto escribe menos, explica menos y revisa más rápido.
• El cliente obtiene una idea clara de lo que está incluido y lo que es opcional antes de que comience el trabajo.

El objetivo no es restringir lo que es posible, sino hacer que las cosas estándar sean sencillas, de modo que la energía creativa vaya a donde realmente importa.

atQuo is a creative partner that operates at the intersection of design, technology, and marketing strategy. Our **Insights and Talks** exist to demystify this intersection, sharing the expert knowledge required to make smarter decisions about the tools and tactics that drive growth. This same expertise fuels our services, where we execute on that strategy to build powerful digital experiences that help brands scale with clarity and confidence.