Show layers on hover
Add your layers and create the desired layout.
- 1
-
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. - 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
andhover3
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 typehover1
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 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 whenhover2
and hover3 are triggered. So writehover2,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 layerAnimationPlayIn
to the first layer's Plays in when field to make the animation play immediately when the slider loads.