Events - Show layers on hover

Check out this documentation to understand how events work!

Add your layers and create the desired layout.

1
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 hit the More button and locate the Layer global animation properties section at the bottom, an turn on the Repeatable switch.

When it's done, go to the Events panel 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.

2
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.

3
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 hit the More button and locate the Layer global animation properties section at the bottom, an turn off the Instant out switch and be sure that the Repeatable is still on.

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. The key is to have all of the created events written to these fields without any of them being repeated.

Repeat this step at each of the image layers.

Tip:

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