Events - simple popup

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 create a simple popup within the slider using Smart Slider 3's events.

Creating the IN event

Go to one of your slides (or create a new one), and add a new button layer. Go to the Layer Window's Animations tab and click on the Events. Name your event by writing its name to the button layer's Animations → under Events: Click field. I'll go with popup.

Put down as many layers as you need to create the popup content. You are free modify and customize them at this step. I'll add an area, a heading, a text and an icon layer. I'll arrange these layers to entirely cover my button layer.

Creating the IN animations

Go the first layer's Animations tab and add a new IN animation. Select one of the predefined animations, or create your own. Hit the more button to open the Animation manager. Scroll to the bottom part of the Animation manager, and find the Event field, then simply write your in event's name to the Play field, and turn on the Repeatable option.

Click on apply.

Now you might want to check what you have just done, so you'll probably click on the Preview button. If you have created a layout similar to mine (where the button is behind the popup) you might be surprised to see that the click is not working. This is happening, because the area is still in front of the button, so you actually can't click on the button, as the area is above it. You could re-order the layers to give the button a larger z-index, but there is a better workaround for the problem.

Go back to the layer's Animations tab, and click on the More button again. Add a new animation step at the top right section of the Animation manager.

Put this new animation before the previously selected animation. (You can do this by drag'n'dropping it.)

Modify the newly added animation's Duration to 1MS, set its Opacity to 0 and set the Offset - X to some large number, like 3000px, then click on Apply.

Creating the OUT animation

Staying at the layer's Animations tab, let's add an OUT animation. Again, you are free to select some predefined animation, or create your own. When you are done, scroll down to find the Layer global animation properties block, and name your out animation by writing its name to the Event - Play field. Leave the Repeatable option turned on, but turn off the Instant out.

Before you would click on Apply, let me remind you what happened when you were trying to click on the button for the first time. The area covered the button, so you were not able to click on it. This was fixed by adding a new animation step which would make the IN animation start from another position which is almost exactly what needs to be done this time. So before you would apply your settings, click on the plus icon again, and add a new animation step!

The settings should be quite similar to the other one. Set the Duration to 1MS, the Opacity to 0 and the Offset - X to some large number. This time you shouldn't reorder the animation steps, as the layer should move away after it was faded out.

Creating the OUT event

I added the icon with a closing symbol because I was planning to use it to close my popup. So select that icon layer, go to the Animation tab, and write your out name of the event to the Events - Click field. I'll go with popout

From now on whenever you click on the icon, the area layer will fade out. The last step is to copy the animations to the other layers.

Copying the layer animations

You've done a lot of changes regarding to the layer animations in this tutorial, which you would have to apply to all of your layers which you want to appear in the popup. But don't worry, you don't have to repeat step 2 and step 3 several times - we have a built in method to copy the animation from one layer to another.

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.

Now you can click on the Preview button to see what you have created!