Show layers on hover

☝️ Note: This tutorial is for Smart Slider 3 Pro version only!
☝️ Note: Check out this documentation to understand how events work!

Add your layers and create the desired layout.

IN animation on the layers

Select the first layer that needs to have an animation. Pick a predefined one and customize it. Then turn on the Repeatable option.

When it's done, write a custom event name to the Plays in when: field. I'll go with hover1.

Repeat this step at each of your layers and use a unique event name each time. E.g. use hover2 at the second layer, hover3 at the third, etc.

Triggering the event

Once you're done with step 1, you ended up as many new events as many layers you would like to animate. I have hover1, hover2 and hover3 respectively.

Select the layer where hover1 needs to be triggered, go to the Animation tab at the Layer window and select the Events panel. At the bottom of the panel you'll find a section named Trigger custom event on. Locate the Mouse enter field and type hover1 there.

Repeat this step at each of your layers and trigger the event that needs to be played when the layer hovered.

OUT animation on the layers

Two of the images needs to be hidden when the mouse is over a specific heading layer. So let's add some Out animation on the first image layer. Pick a predefined animation and customize it.

Then go to the Events section and locate the Plays out when field. I'm at the layer that plays in when hover1 is triggered, so the out animation has to happen when hover2 and hover3 are triggered. So write hover2,hover3 to the Plays out when field.

Go to every other layer and write each event to the Plays out when which is not triggered by Plays out when.

💡 Tip

Write layerAnimationPlayInto the first layer's Plays in when field to make the animation play immediately when the slider loads.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.