Events - Cancelling an event

Check out this documentation to understand how events work!

Let's say you need to show a button when you hover over an image, then disappear when the mouse leaves the image, and you need that button to be clickable when it is visible. You can learn how to make such a thing from this tutorial.

1
Creating the layers

Put down an image layer, choose your image and add a new button layer. You are free to change its text and customize it. When you are done, put the button above the image where you would like to show it.

2
Creating the animation

Select your button layer, go to its animation tab and add a new IN animation. You can select an animation from the list or create your own, just when the animation is done, don't click on apply but scroll down and find the "Layer global animation properties" box, and name the event. I'll use button_in.

When the event is named, turn on the Repeatable option and now you are ready to click on Apply.

Staying at the button layer, add a new OUT animation. You can select one from the list or create your own, then scroll down and find the "Layer global animation properties" box, and name the event. I'll use button_out.

Make sure the Repeatable is turned on and the Instant out is turned off before clicking on Apply!

3
Calling the events

Select the image layer, go to the Animations tab, find the Events at the bottom. If you see the green SHOW button next to it, click on the button to find the Mouse enter and Mouse leave fields.

To the Mouse enter field you will need to write the name of the IN event (in my case, it's button_in), and to the Mouse leave field, you will need to write the name of the OUT event (in my case, it's button_out).

If you preview your slide, you'll see that when you hover over the image, the button will appear, but when you try to click on the button, it disappears. This is happening because only the image is triggering the button layer animations, but the button itself isn't.

4
Cancelling the events

The button_in and button_out events need to be cancelled on the layer that is "in their way" when they are trying to work, and this layer is the button. So select the button layer, go to the Animation tab, and make sure the Mouse enter and Mouse leave fields are visible.

When you hover over the the button, there is a mouse leave happening in your image layer, therefore what you need to do is to cancel the button_out event when the mouse enters the button layer. So simply write "cancel-button_out" (without the quote signs) to the Mouse enter field.