Events - Layer animation triggering

This documentation is for Smart Slider 3.3.8 and higher versions. If you have an older version,  update or follow  this documentation instead.

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. Turn on the expert mode to see all options. 

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

and add an outgoing animation too.

Then go to the Events, where you should write an event name for the Plays in when and for the Plays out when field. You should also turn on the Repeatable and turn off the Instant out options.

Decide, what will it be the action at any of your layers or structures, which will trigger these animations. You will have to 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 the 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.

Currently these are the predefined triggers:
  • layerAnimationPlayIn
  • LayerClick
  • LayerMouseEnter
  • LayerMouseLeave
  • SlideClick
  • SlideMouseEnter
  • SlideMouseLeave
  • SliderClick
  • SliderMouseEnter
  • SliderMouseLeave

The layerAnimationPlayIn can be useful for cases, when you want your incoming animation to be triggered with the slide's loading too besides the given event trigger. So this way your layer would start from a visible state, what you could hide with the 'go' trigger in my example and show it again with the 'come' event trigger.