Blog Post

Discover
1 MIN READ

Storyline 360: Animated Tabs Accordion Interaction

DavidAnderson's avatar
6 years ago

This six-tab accordion interaction uses motion paths and a variable to animate the opening and closing of each tab.

View the project in action

Published 6 years ago
Version 1.0
  • TaurenWoods's avatar
    TaurenWoods
    Community Member
    Thank you, David! This is a nice way to present a small piece of information very quickly.
  • Love this template. My challenge though is that others feel there should be audio for content on each tab.( I've played around with this but can't seem to get the audio to play when it should due to animations and motion on the slide. I've tried having the audio start after the start animation and having it end before the exit animation, but there is something I'm missing that I can't get it right. I think it has to do with the slider motion path. Any suggestions?
  • Hi all!

    I've been trying to modify this accordion for accessibility and with gradient backgrounds. To make the numbers visually accessible I need to put them in a shape, so they have a solid background to achieve high contrast. Here is a screenshot of how I want it to look. https://app.screencast.com/dIAsGHst8M1gU

    I'm trying to reverse engineer the workflow and triggers unsuccessfully and I'm hoping to get some help from the E-Learning Heros community. Looking for general suggestions on workflow to build and specific suggestions on how to get it to function exactly the same but with an extra shape on the sliding tab.

    I just read that the path has to be applied to each object in the group and it looks like it has to be applied to the group as well. Is this correct? Any other ways to achieve my objective?

    I'm planning to make a template with 3, 4, 5 and 6 tabs. Should I take everything down to the base layer and rebuild the triggers and motion paths layers for the different number of tabs?

    Thanks in advance!

  • Hi there - has anyone tried to use this and put audio for each layer? Since it's pauses the timeline when each layer is accessed, I'm not sure how to make the audio play. Any ideas?
  • Brandilyn, that is exactly what I do. I put the audio on the layer and pause the timeline which is the base layer. You may also want to stop the audio when the person closes the tab so voices don't run over. If the voice/audio on the base layer is always the same, you may need a variable that only plays the audio once.