This six-tab accordion interaction uses motion paths and a variable to animate the opening and closing of each tab.
Published 6 years ago
Version 1.0
Blog Post
25 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.
FINALLY! Yes, you can add audio to this animated accordion!!
I tried to figure this out 2 years ago but today it just clicked. I can't believe it really isn't as difficult as I thought.
In a nutshell, here's how to do it (but no worries - see the attachments if you need to see it and test it out yourself)
So on each layer the first 2 triggers are :
- Pause timeline on this layer when the timeline reaches time:
- Move Tab # along Path Close when the timeline reaches time:
Here's how I added audio:
On every layer:
- Render the audio for that layer and make note of the end time (be sure not to have the audio start until the beginning animations of the Group X are completed (X is whatever slide layer you are on) and also the animations for the Heading, Body & Background are completed. Be sure to adjust the timeline at the end to have a little dead space (just best practice).
- Adjust the 1st trigger (Pause timeline) so that the timeline pauses just AFTER the audio is completed.
- Adjust the second trigger (Move tab) so that it does not move until after the audio has completed and after the pause point you set in the 1st trigger.
- Adjust the Heading, Body, and Background objects so that their exit animation happens AFTER the pause.
- Repeat this on every layer.
Then if you want the forced navigation use David's trick to have trigger buttons on the base layer but OFF the slide for each layer (Layer 1 Trigger, Layer 2 Trigger etc.) and a trigger to change the trigger buttons to visited when the user visits each specific layer and then the state trigger to change the state of the Next button to normal when the state of all the hidden off slide trigger buttons on the base slide are visited.
I've attached the Storyline file with just text audio in it and a Word document with screenshots in case it helps.
EDITED: So it looks like I can only add 1 attachment to this post. I put the Word document as a resource in the Storyline file.
