Blog

In eLearning, there are a lot of ways to display a Next or Previous button. Lately, I’ve been experimenting with hiding navigation until the user actually wants to use it. This keeps the screen tidy and minimalistic.

I wanted to create tabs that are just visible on the side of the screen, then expand when the learner hovers over them. There are a few ways to create this in Storyline and some options are definitely better than others. In this blog post, I explore four different methods to create this interaction. Spoiler alert: if you want to skip to the best one, it’s at the end.

Method #1: Use a Built-in Hover State

Storyline has a number of built-in states, which means you can display a different version of the object without the need for additional triggers. With this method, I set up the object so it’s barely on screen, then created a Hover state and changed the x-position of that object to be more on screen.

This was the result:

Although the interaction is very quick to set up, the movement is a bit abrupt for the learner. I knew there had to be a way to make a smoother movement and have it actually slide out from the side of the slide.

Method #2: Built-in State with Animations

Next, I experimented using animation on the object. If you add an entrance animation of “Fly In” to the Hover state object (not the Normal state), it does add some really smooth movement coming out from the side.

However, this method has two major issues.

First, it doesn’t move from the existing location (Point A) to your extended location (Point B). Instead, it flies in from off-screen, which means the tab disappears completely for a split-second. The second issue arose from the exit animation to fly back to the side of the screen. It seems Storyline switches back to the normal state before finishing the exit animation, leaving you with something like this:

If you want to avoid the above issue, you could leave out the exit animation. Then you would have a so-so entrance animation and no exit animation. Not a terrible solution, but not great.

Method #3: Using Motion Paths

Next, I tried created entrance and exit motions paths to actually move the object on the screen. Getting the tab to expand on screen was easy: just make a trigger to say “move this tab on Entrance animation when the user hovers over the tab”. Getting the tab to do the reverse action and hide when the user stops hovering was another story.

Hover triggers have the option to restore upon mouse leave:

This option works well when the trigger does things like showing layers, but it doesn’t seem to work that well when a motion path is involved. This was the result of the trigger above- a tab that wouldn’t stay closed:

Since the “Restore on mouse leave” option wasn’t working the way I wanted it to, I experimented with adding a transparent box underneath the tab. With that transparent box, I created a trigger to move the tab on its exit animation if the user hovers over anything besides the tab. You might be able to guess what happened- it worked great once, then it kept moving the tab on the exit animation because the user continued to hover over things besides the tab.

So finally, we come to the last (and in my opinion best) method.

Method #4: Motion Paths with Variable Tracking

It was clear to me after experimenting with Method #3 that the crucial piece missing was some critical thinking from Storyline. Of course, a program only does what you tell it to, so I had to tell Storyline “Hey, don’t stop a movement while you’re in the middle of it and don’t start a new movement until the previous one has finished.”

In this case, the best way to tell Storyline what I wanted it to do was through a combination of variables and triggers. I created a variable for each tab (which can be reused across slides). Then I created a series of triggers to do the following:

1. Move a tab on its entrance path when the user hovers over it (without restoring upon leave)
2. Set the appropriate variable equal to true when the entrance animation completes.
3. Move the tab on its exit path when the user hovers over the background IF the tab variable is equal to true.
4. Set the appropriate variable to false when the exit animation completes.

Using that setup, I created this movement:

Much smoother, huh? You can sometimes get some weird behavior if you move your mouse away very quickly, but it will always finish the motion path.

And since most people hover over a tab with the intention of actually clicking it, I added two more triggers that execute when it’s clicked:

1. Set the appropriate variable back to false.
2. Jump to the next/previous slide.

The Result

If you’d like to download a sample Storyline file with the Method #4 tabs already set up, download the source file here.

If you’d like to test out the different tab behaviors discussed above, see the project here.

In the sample, I have the tabs set up on individual slides. I’d recommend keeping the tabs there if you need to add interactive elements that would need to appear on top of the background object used to control the exit animation.

However, if you have simple content or videos with limited interactivity, it would be pretty easy to move the tab functionality to the slide master to keep your individual slides clean. You would need to put the tabs and a background object (like the transparent rectangle I used) onto a layer within a slide master. That would ensure the tabs and background objects appear in front of the individual slide objects. You would also need to add a trigger to the slide master to show the layer when the slide master timeline starts.