Events - multiple events in a single slide

Check out this documentation to understand how events work!

The tutorial is only for the pro version, as the events and layer animations are not available in the free version!

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.

1
Preparations

For this tutorial, you will need multiple layers. I put down a button, a text layer, an area and an icon, then duplicated all of them. As an extra, I created another layer for the instructions.

Create your layers, customize them and add your content!

In this tutorial, having the correct z-indexes in your layers is very important, especially if you would like to display your instructions layer below the content layers. Here is my layer list:

2
Creating the IN animation

Now that you have your layers, select a text, area or icon layer, go to its Animations tab and add a new IN animation. Select the animation from the predefined animation list, or create your own.

Once you're done with that, open up the Animation manager by clicking on the More button at the layer.

Scroll down and find the Layer global animation properties and name your event. I'll call the first event catin.

Turn on the Repeatable option.

Before you would leave, add a new animation step, and order it before your selected animation(s).

Animation ordering

Then set its Duration to 1MS, leave the Delay on 0MS, the Opacity should be 0% and the Offset - x should be some large number, like 6000px.

Animation settings

Don't copy the animation to your other layers just yet!

3
Creating the OUT animation

Stay at the layer where you have added the IN animation, and add a new OUT animation. Select an animation from the predefined animation list, or create your own.

Once you're done with that, scroll down and find the Layer global animation properties and name your event. I'll call this event catout.

Turn on the Repeatable option and turn off the Instant out.

Before you would click on the apply button, add a new animation step, and leave it to be the last animation step. Then set its Duration to 1MS, leave the Delay on 0MS, the Opacity should be 0% and the Offset - x should be some large number, like 6000px.

Animation settings

4
Duplicating the animations

Now you have a layer with a correctly set IN animation, but the OUT animation is stil missing some piece of information, as we'd like to make the out animation happen when the "Dog" layers appearing. So let's create a new event, dogin, and add it to the already existing OUT animation's Event field, under Layer global animation properties.

Now everything is ready for duplication!

If you scroll down to the timeline, you'll find a list of your layers there. If you right click on the layer where you have created the IN and OUT animations, you can see the following menu appear:

Click on Copy, to copy every animation on the layer, and then right click on some other layer where you need the animations and choose Paste.

You should copy the animations to every cat-related layer (except the button), and one dog-related layer (which is not the button).

5
Modifying the duplicated animation

Now click on the dog related layer where you copied the animations from the cat related layer, and click on the IN animation either at the Timeline or at the Animations tab.

Change the event name from catin to dogin.

Then go to the OUT animation, and change the event names there, too. The catout should be dogout, and the dogin should be catin.

6
Creating the events

To make the cat-related layers appear, the cat button layer should call the catin event, so go to the layer's Animation tab and find the Click field under the Events, and type the catin word there.

Call the dogin event from the dog button layer!

Now the only thing left is to make the close icons trigger the out animations. Select the cat icon layer, go to its Animation tab and find the Click field under the Events, and type the catout word there.

Do the same at the dog icon layer, just call the dogout event from there, and you are done.