Multiple events in a single slide

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

In this tutorial you can learn how to handle multiple events in the same slide to make some layers appearing when a button is clicked, and hide some other layers to the same event.

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

1

Preparations

For this tutorial, you will need multiple layers. I put down two of the following: button, text layer, and icon. I put the two buttons to a row with two columns. The text and icon layers were added to a similar row as well.

So before proceeding, create your layers, customize them and add your content!

☝️ Note: If you want to put a layer above other layers, you should work with Absolute layers.

2

Creating the IN and OUT animation

Now that the layers are set up, let's select a row, with has the text and icon layer. Add a new In animation, then add an Out animation. I'll pick Fade for both.

Turn on Repeatable.

Do the same with the other row as well.

3

Create events

Let's select our first row, that has a text and icon inside. Head to the Layer window → Animation tab → Events and create some events. The good thing about custom events is that you can name them anything, as long as you're using characters from the English alphabet. (You can also add numbers and _ sign.)

I selected row which is about dogs, so I'll use dogin and dogout events.

Let's select the other row (for me it's the one about cats) and create events for them as well. I'll use catin and catout. But I also want this row to fade out when the dog layer comes in. So I'll write dogin to the Plays out when field after a single comma.

Now head back to the Dog's row and put catin next to dogout.

4

Trigger the animations

Now that the events are set up, let's trigger them. First select the Cat button and go to Layer window → Animations → Events. Scroll down to the bottom and find Click under Trigger custom event on. Write catin there to trigger this event.

Select the dog layer and repeat the process with the dogin event.

Now if you preview the slide, you can see that clicking on the Cat button shows the cat layer, while slicking on the dog button shows the dog layer, while hiding the cat layer.

5

Closing using the icon

Both the dog and cat row has a closing x icon, which currently does nothing. So let's configure that!

Select the Dog closing icon and at Layer window → Animations tab → Events → under Trigger custom event on - Click write dogout. This will trigger the dog layer's out animation, without affecting the cat layer.

Do the same with the cat closing icon, just using the catout event.