New Slider Tab Interaction to Share with Community

While I missed out on the previous slider interaction challenge, I wanted to share a new slider tab interaction that I built in Storyline 2 with the Community. It includes a notebook with tabs in which motion paths raise and lower the tabs as a pencil slider is moved across the desk. The tabs include text boxes in groups that you can easily update to change out your text. All images are either free graphics or built by me, so you are welcome to re-use. In addition to the motion path and slider triggers, I also added some variables to allow smooth transition of the tabs when moving forward and backward through the interaction.

I've used this in a couple of courses and hope it will be of help to you.  A working demo link and the Storyline file as an attachment are included.

Demo

Best,

Lu Post

9 Replies
Lu Post

Bruce, thank you for your comments and I agree that clicking the tabs would make good sense. It would certainly be an easy modification to the template. I initially started working on this template for the Interactive Slider challenge (just couldn't get it done in time), so that's a big impetus for including a slider. I also ended up using this in a course where the user is building a Compliance Program (creating the tabs, adding the content, etc.), so the pencil is a big part of the overall design.

That's the great thing about Storyline. There are so many options.

Tom Kuhlmann

Good job and thanks for sharing the template. I agree with Bruce on the pencil vs tabs. However, I think it's just a matter of changing it up a bit and giving a reason for the pencil. And that's something people can do when they download and modify the template. It makes for a good challenge activity. I like the dragging interaction. I find that it draws people into the course because it's a bit more novel than clicking. Of course the novelty of dragging wears out fast.

One thing I recommend for people who do use the template is to hide the instruction to drag when the person begins the dragging interaction. I had a similar issue in the safety tempalte. The instructions display initially, but it looked weird to have them persistent. So I added a trigger to hide once the user moved the slider.

 

David Anderson

Hi Lu - the challenges are always open so you should never feel rushed to join. The sliders are such a popular feature that I'm sure folks would like to see how you set up your custom slider thumb and tabs.

Some folks follow the discussion while others follow the challenges. I just wanted to let you know it's okay to cross-post examples around here... we're mellow on rules like that:-)