• Tipos de animación
• Efectos de animación
• Pasos de una animación
• Activadores de animación
• Agregar múltiples animaciones
• Animar varios widgets
• Eliminar una animación

Tipos de animación

Puedes aplicar animaciones a todos los widgets, excepto Hotspots, y Mapas de Google. 

Para animar un widget, haz clic en el icono de Animación en sus controles. Hay cuatro tipos diferentes de animación que puedes seleccionar:

• On Load comienza una vez que se carga la página en el navegador;
• On Click requiere que un visitante haga clic en el widget o en el activador de la animación;
• On Hover comienza cuando un visitante mueve el cursor sobre el widget o su activador;
• On Scroll comienza en una posición especificada en la página y sigue al haber desplazamiento.
  
  

En los diseños de dispositivos móviles y tablets, no se puede utilizar la animación On Hover.

Para que la animación en desplazamiento (On Scroll) funcione, se requiere aumentar la altura de la página.

Efectos de animación

Después de haber seleccionado uno de los tipos de animación, se le presentará una lista de posibles efectos. Hay cuatro básicos: 

• Move. Arrastra el widget a la posición donde debe movilizarse después de que la animación finalice, colócalo con las flechas del teclado o ingresa el valor en píxeles.
• Opacity. El valor de este parámetro indica el porcentaje de opacidad: el primero muestra la opacidad inicial, mientras que el segundo muestra la opacidad del widget después que la animación finaliza.
• Rotate. Ingresa el número de grados que rotará el widget.
• Scale. El valor muestra el porcentaje del tamaño inicial del widget, al que se ampliará o disminuirá. 

También hay varios efectos preestablecidos que te permiten hacer que el widget se muestre latiendo, se desvanezca, o aumente su escala, etc. Puedes personalizar cada uno cambiando los parámetros.  

Parámetros de animación

La mayoría de los parámetros funcionan de la misma manera para casi todos los tipos y efectos de animación: duración, retraso, aceleración y bucle. La opción bucle permite que tu animación repita su ciclo o se ejecute desde el final hasta el punto de inicio después de que finaliza la animación con el en el modo inverso.

Si tu animación incluye varios pasos, puedes establecer un bucle solo para pasos específicos. Ten en cuenta que una vez que se realiza un bucle de un paso, todos los pasos subsiguientes mantendrán la opción de bucle activada por defecto.

La opción 'Once per user’ te permite reproducir una animación solo una vez para cada visitante. Todos aquellos usuarios que visiten más de una vez, los widgets con esta opción estarán ocultos, como por ejemplo para mostrar un banner de política de cookies.

También hay parámetros específicos que se pueden aplicar solo a ciertos tipos de animación:

• Start when in view, para la animación On Load. De manera predeterminada, este tipo de animaciones comienzan tan pronto como la página termina de cargarse, incluso si el widget animado aún no es visible. Utiliza este parámetro para retrasar la animación hasta que el widget aparezca realmente en la pantalla del visitante.

• Start point, para la animación On Scroll. Puedes elegir el punto de inicio para la animación basado en su posición, según esté alineado con la parte superior, central o inferior (de forma predeterminada) de la misma. El ‘Offset’ le permite modificar el punto de inicio a la altura exacta en píxeles.

• Speed, para la animación On Scroll. Al cambiar la velocidad, puedes definir cuánto tiempo toma para mostrar cada paso de la animación. Por ejemplo, si estableces la velocidad en 1x, el paso se mostrará durante el tiempo requerido para desplazar un píxel; con una velocidad de 0.5x, por dos píxeles. Cuanto más alto el valor de velocidad de una animación, menor será el desplazamiento necesario para reproducirla.

 

Pasos de una animación

Los efectos se pueden combinar mediante pasos (steps). Para agregar un nuevo paso, haz clic en el ícono + debajo del widget. 

Por ejemplo, supongamos que deseas que el widget cambie su opacidad después de que un usuario haga clic en él y luego escale hasta un 150%. Para ello, selecciona la animación On Click con el efecto Opacity. Haz clic en +, luego elije el efecto Scale y establece el valor en 100 → 150.

Activadores de animación

Es posible especificar otros widgets que funcionen como activadores (Triggers) de una animación. Para ellos, selecciona el tipo de animación, haz clic en ‘Add trigger,’ y elige cualquier widget que prefieras. Puede especificar hasta tres activadores diferentes. 

Agregar múltiples animaciones

Puedes aplicar diferentes tipos de animación al mismo widget simultáneamente. Para hacerlo, haz clic en ‘Add’ en la parte inferior de los controles de animación.

Luego haz clic en los controles de animación, verás una lista de todas las animaciones agregadas a tu widget. Selecciona el tipo de animación para ver o editar sus parámetros.

Animar varios widgets

Se puede animar simultáneamente más de un widget. Selecciona todos los widgets necesarios con Shift + clic, y luego procede con el control de animación como de costumbre. Todos los cambios se aplicarán de manera idéntica a cada widget individual en la selección.

Si selecciona una combinación de widgets animados y regulares, se pedirá que combine diferentes animaciones, de modo que cada widget seleccionado tenga atributos idénticos.

Eliminar una animación

Para desactivar la animación aplicada, desplaza el cursor sobre su título (On Click, On Load, Hover, u On Scroll), luego haz clic en la flecha adyacente para abrir el menú desplegable y selecciona 'None.’ Todos los parámetros de animación se guardarán y podrá aplicarlos más tarde. 

Si deseas eliminar una animación por completo, haz clic en ‘None’ y luego en ‘Delete’ para borrar los parámetros previamente establecidos.