Events - Show layers on hover

Check out this documentation to understand how events work!
Be sure to switch to Expert mode to see all options in this tutorial.

Add your layers and create the desired layout.

IN animation on the layers

Turn on the Expert mode and select the first layer that needs to have an animation. Pick a predefined one and customize it. Then turn on Repeatable.

When it's done, at to the Events tab and 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.

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:".


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