Zero Block: Trigger Animation

Cómo configurar la animación de un elemento que se activa al hacer clic o pasar el ratón por encima de otro elemento

Cómo empezar

Los disparadores forman parte de una animación paso a paso. Para trabajar con la animación de disparo, es necesario aprender los conceptos básicos de la animación paso a paso de esta guía:

Guía para crear una animación paso a paso

Para crear una animación de activación, es necesario empezar por configurar una animación paso a paso. Para ello, abra la configuración del elemento y haga clic en Añadir en la sección "Animación paso a paso".

Zero Block: The "ADD" button under "STEP BY STEP ANIMATION" in the element settings panel on the right.

Seleccione el tipo de evento que desea activar la animación. La animación sólo puede activarse al pasar el ratón por encima o al hacer clic.

In Zero Block, the "on Click" option in the "EVENT" drop-down list within the "STEP BY STEP ANIMATION" panel on the right.

Haga clic en Añadir activador y seleccione un elemento en Zero Block que desee que active la animación. La animación se iniciará después de hacer clic o pasar el ratón sobre este elemento.

Zero Block editor: the "STEP BY STEP ANIMATION" panel with "EVENT" set to "on Click" and a selected button element assigned under "TRIGGER".

Después de seleccionar un disparador, añada pasos de animación. Por ejemplo, hemos añadido el movimiento de la forma por 300px a la derecha en un clic de botón.

Zero Block: Step-by-step animation settings panel on the right, showing an assigned trigger element, animation steps, and step properties.

HAZ CLIC AQUÍ

Cómo probar una animación de activación en el navegador

Además de los botones "Reproducir elemento" y "Reproducir todo", Tilda le permite previsualizar su animación en el navegador.

Abre dos pestañas en tu navegador:Zero Block y la misma página en el modo de vista previa.

De este modo, podrás observar cualquier cambio que realices en Zero Block previsualizándolo en la segunda pestaña. Para que los cambios aparezcan en la página, actualiza la página de previsualización.