Zero Block: Trigger Animation
How to set up the animation of an element that is triggered by click or hover over another element
Getting started
Triggers are a part of a step-by-step animation. To work with trigger animation, you need to learn the basics of step-by-step animation from this guide:
To create a trigger animation, you need to start setting up a step-by-step animation. To do this, open the element settings and click on Add in the "Step-by-step animation" section.
Select the type of event that you want to trigger the animation. Trigger animation can only work on hover or click.
Click on Add trigger and select an element in Zero Block that you want to trigger the animation. The animation will start after click or hover on this element.
After selecting a trigger, add animation steps. For example, we have added the movement of the shape by 300px to the right on a button click.
How to test a trigger animation in your browser
In addition to the "Play Element" and "Play All" buttons, Tilda allows you to preview your animation in the browser.
Open two tabs in your browser—Zero Block and the same page in the preview mode.
This way, you can observe any changes you make in Zero Block by previewing them in the second tab. To make the changes appear on the page, refresh the previewing page.
Open two tabs in your browser—Zero Block and the same page in the preview mode.
This way, you can observe any changes you make in Zero Block by previewing them in the second tab. To make the changes appear on the page, refresh the previewing page.
