Cancelling an event

☝️ Note: This tutorial is for Smart Slider 3 Pro version only!

Let's say you need to show a button or caption 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.

☝️ Note: Check out this documentation to understand how events work!

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. Then go to Events tab and create a new event that'll fire the In animation. I'll use button_in, which I'll write to Plays in when.

When the event is named, turn on the Repeatable.

Staying at the button layer, add a new OUT animation. You can select one from the list or create your own. Then go to the Events tab and create a new event that'll fire the Out animation. I'll use button_out, which I'll write to Plays out when.

3

Calling the events

Select the image layer, go to the Animation tab → Events and locate the Trigger custom event on section. The "Mouse enter" event will trigger the custom button_in event, and the "Mouse leave" will trigger 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_out events need to be cancelled on the layer that is "in its way" when it's 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 field is 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 to the Mouse enter field.