This six-tab accordion interaction uses motion paths and a variable to animate the opening and closing of each tab.
Published 7 years ago
Version 1.0
Blog Post
24 Comments
- 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! - I had created some experiments on how to do accordion tabs and have them go both directions. See what you think of these. https://360.articulate.com/review/content/782fad62-eabc-48aa-84e9-c1665ab7d0c2/review
If you like any of these I can figure out how to get the story file to you. - 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.
Is there a way to show a next button after all the tabs are clicked? I mean without having to insert loads of triggers?
As much as we all love this accordion, has anyone figured out how to add narration? 😁
With accordions, you have two options for adding narration:
- Add a narration icon on each layer so users can choose to play the audio for that section.
- Use a trigger with a variable that automatically plays an audio file when a specific layer is shown.
I've used both, it just depends on whether you want the narration to play by choice or automatically.
With this particular accordion design there is a pause timeline trigger in order to make the rest of the slide function as designed. Therefore, you cannot use your usual add narration triggers. Tried variable, could just be me, but did not get it to work in my specific file, using a button to play an audio file will work 🙃, was just hoping for an autoplay.
