Layer events

☝️ Note: Events are available only in the Pro version of Smart Slider 3!

From the layer window your layer animations doesn't have to be triggered by the slide changing, but you can also trigger them by using different events, like when your mouse enters the slide, or when you click on an item, etc..

Video

Predefined events

There are two options, one of them are the predefined events, what you can choose from the drop down list in the animation manager, which are these:

layerAnimationPlayIn: triggers the animation when the layer animations start (e.g.: on slider load or after slide switching). It can be useful for cases, when you want your incoming animation to be triggered with the slide's loading, besides the given event trigger. This way your layer would start from a visible state.
layerAnimationPlayLoop: triggers the animation when the slide loads. This allows you to also trigger the loop behavior with your custom events.
LayerClick: triggers the animation when the layer is clicked.
LayerMouseEnter: triggers the animation when the cursor enters the layer area.
LayerMouseLeave: triggers the animation when the cursor leaves the layer area.
SlideClick: triggers the animation when the slide is clicked.
SlideMouseEnter: triggers the animation when the cursor enters the slide area.
SlideMouseLeave: triggers the animation when the cursor leaves the slide area.
SliderClick: triggers the animation when the slider is clicked.
SliderMouseEnter: triggers the animation when the cursor enters the slider area.
SliderMouseLeave: triggers the animation when the cursor leaves the slider area.
InstantOut: You can make the outgoing animation play immediately, even if the Mode is set to Forced.
OutForced: When the Mode is set to Forced you can play your outgoing animation on both a custom animation and when the slide changes.

Custom events

You can create custom events:

which can be triggered from any layer, on the following actions:

Click
Mouse enter
Mouse leave
Media started (only works with video and audio layers!)
Media paused (only works with video and audio layers!)
Media stopped (only works with video and audio layers!)

☝️ Note: Would you like to see some example on how the events are working on real sliders? Check out our demo sliders.

Layer animation triggering

You can trigger your layer animations by using events, which can be clicking or just entering/leaving something (layer, slide, structure) with your mouse cursor.

The system works that way, that you have to add an incoming layer animation,

and add an outgoing animation for that layer what you want to trigger with an event.

Then go to the Events tab, where you should write an event name in the Plays in when field and in the Plays out when field. You should also turn on the Repeatable option, if you want to repeat your event more times.

☝️ Note: Your event name can be anything, but it can only contain letters of the English alphabet, numbers and underscore (_).

Decide, what will it be the action at any of your layers or structures, which will trigger these animations. Then paste the incoming and outgoing event's name to the Trigger custom event on part. You could put one into one, the other into another option, like Mouse enter: come, Mouse leave: go.

Or you can put both of them into the same place, as I do, into the Click: come,go as you can see, separated by comma and there is no space. This kind of comma separating will make the clicking to trigger first the first event, and the second clicking the second event, and if you had the repeatable options turn on, then these will happen again and again with every clicking.

So if I will click on a button, my layer will come in, and then if I will click again, it will go out, and if I click again, it will come in again, and the next click will make it go out, etc..

If you have a video, youtube or vimeo layer, you can use the play, pause and stop options too, to trigger something based on the video's state.

And at the In and Out animations, where you gave the event's name, you don't need to give a name to it, but you can also select one of our predefined events, and then it will be triggered by that. So you don't need to write those names anywhere else, the trigger is automatic.