How to Create a Cool Menu Button Nesting Animation Effect with Storyline

The menu button presents a nice, subtle effect when a user interacts with it.

Creating the Shapes

To begin, I created the overall design of the circles, colors, labels, and shadows. The menu icon has a plus sign in the center, with each of the three menu items showing the numbers 1, 2, and 3, respectively. We’ll link to specific layers in a minute.

Once I was satisfied with the designs, I duplicated the menu icon (“+”) and removed all design aspects such as fill and shadow. This new invisible shape will act as the base object for the menu items and will be the animation source for the three buttons. 

Here's a useful tip: When it comes to stacking objects on the screen, I like to label the objects on the timeline so I can identify and select objects more easily later on. 

Nest Objects Within a State

After I created the invisible base object, I cut and pasted the three menu buttons into the invisible menu animation circle’s “normal” state. 

With a click on DONE EDITING STATES, I linked my objects together as one group, making it easy to apply entrance and exit animations, as well as growing and shrinking effects, to the invisible menu animation shape. I also set its initial state to “hidden,” so the animation does not automatically occur.

Now here’s a cool thing: even though I’ve only applied the animation effect to the invisible base object, Storyline automatically includes the effect on the nested objects, treating them as part of the base object. 

Let’s switch over to the timeline to look at the adjustments I made there. First, I shortened the timeline so its length does not drive the duration of the exit animation effect—if it did, the three buttons would disappear when the timeline ended! Additionally, in order to make the animation appear and disappear behind the menu icon rather than in front of it, I placed the shape containing the animation below the icon on the timeline.

TIP: For a slower animation, like the standard 0.75-second animation setting, ensure the timeline is set to at least 0.75 seconds in length and create an invisible shape on top of the icon that eventually disappears, but prevents users from clicking the icon prior to the end of the timeline. 

Create a Variable

Next, I needed to enable the animation effect based on the user’s interaction, so I created a few triggers to execute based on the value of a single variable. The variable I created is a true/false variable with a default value of false. In its default state, the menu items will exit or not be visible; when true, the menu items will enter.

Triggers and Hotspots

My first trigger toggles the value of the variable between true and false based on whether the learner clicked the menu item to activate the entrance or exit animations.

Then I created two other variables that change the state of the invisible menu animation shape to a “normal” or “hidden” state, which makes the actual menu animation occur.

Now it’s time to link the three exposed menu items to each of their corresponding layers. I created an additional layer containing only hotspots atop the location of the menu items, and linked each of the hotspots to their appropriate layer.

To wrap it all up, I needed to add two triggers to the base layer. One trigger will show the hotspot layer and the other will hide the hotspot layer based on the toggling of the variable.

That's it! My example already had some additional layers with entrance effects on objects that appear to show the layer’s presence, but that’s the only difference.

Now that you’ve seen the basics of nesting shapes with animations and adding triggers and variables, you can use animations in fun ways within your courses. Try some in your next project!