Events - Navigation on static slide

Check out this documentation to understand how events work!

As a preparation, create a slider with a couple of slides.

1
Creating a static slide

Create a static slide by clicking the menu icon at the green New slide button.

Add your layers and create the layout you prefer. Then use the link feature to navigate between the slides. I imported the first slider from the Interior landing page, and I'm going to customize it's menu.

2
Creating the IN animation

Now that you have the desired layout with your layers, it's time to add the layer animations to indicate the which slide are you on. I'll just duplicate the layer that reads "Furniture". Change the font color to the hover color

then grab this new layer and move it above the "original" one in the layer list. You can rename the layer to indicate that it's the hover layer:

When that's done, move the hover layer above the original one at the slide editor. Be sure it covers the original layer entirely! Then go to the Animation tab of the Layer window and pick a layer animation of your liking.

then go to the Events panel and locate the Plays in when field right below the Events. Give a name to your animation. Mine will be nav1. Since I want the animation to happen when the slider loads, I'll also select "layerAnimationPlayIn" from the dropdown list.

Now go back to the In animation, hit the More button, and create a new animation step.

Make this animation 50MS long, change the Opacity to 0 and increase the offset to some really large number, like 6000px.

Then hit Apply.

Repeat this step at every other layer, but don't add the "layerAnimationPlayIn" to any other just the first one. When you're done, you'll have as many nav events as many layers you have. In my case, I'll have 5 nav events (nav1, nav2, nav3, nav4, nav5).

3
Creating the OUT animation

Select the first layer you have IN animation on, and select a new OUT animation. Then hit the More button, and create a new animation step. (Leave the animation at the end of the chain.)

Make this animation 50MS long, change the Opacity to 0 and increase the offset to some really large number, like 6000px.

Scroll to the bottom of the page and turn off the "Instant out" and be sure the Repeatable is turned on.

Then create this animation at every other layer.

Now you have an out animation at each of your layers. Select the first layer, where Plays in when is set to nav1,layerAnimationPlayIn. Type every other IN event to the Plays out when field. In my case, it's nav2,nav3,nav4,nav5.

  Then open every layer one by one, and write the OUT events there. Make sure that the events used at the Plays in when is not present at the Plays out when event.