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
  • This is great! I'm using right now, though when I add text to speech it wont play as the layers pause after a certain time, I have tried adjusting though this disrupts everything! Any tips?
  • OMG David, I would be thrilled! I'll reach out and connect. :) Happy Friday! Angie
    • DavidAnderson's avatar
      DavidAnderson
      Staff
      I really appreciate that, Angie. I think I can help w/ the mentoring from PHX. If you like, I can send you an email with some ideas.
  • MSz's avatar
    MSz
    Community Member
    Hi David! Great solution and many thanks for sharing!
    I tried to understand the solution and redo it on the other slide, but without a variable. Then I said...nah...problably it can't be done as You resume the timeline you can use only triggers for the SLIDE, not for the SHAPE of 1-6. Then I added a variable on Tab 1 and have like 10 triggers to add on each leyer (setting the variable and then moving to the other tab).
    Any solution for copying multiple triggers (found it can't be done)? Or your approach is to create one tab (leyer), duplicating them and then changing the missing parts? It would mean you need to have a whole solution in your head and ready for a particular leyer then going forward?
    • Hi Michael - Since most of the triggers are layer triggers, your best move is to copy/duplicate the layer and then update/modify on the new layer.

      One workflow I found was to create the initial slide layers at the beginning of the project. They're blank layers but they enabled me to set up the base layer tabs and add then copy the first round of triggers (pause timeline, move group, show layer if...). That helped me focus on specific triggers as I copied and pasted.

      The workflow with this type of interaction isn't as clear cut as it is with other interactions since we're copying all objects to each layer. That's really where this becomes a custom interaction that isn't easily updated with different numbers of tabs.

      To your point about having the whole solution in your head is really the case here. If I were going to create a 4-tab version, I would start over by duplicating the base layer and rebuild the slide layers from scratch. I feel that's faster than trying to fiddle with the positioning of objects on every layer.

      Storyline's new motion path features make this super easy to build. It would have taken much longer to get right in previous versions.
      • MSz's avatar
        MSz
        Community Member
        Thank you David for inspiration - both with the solution and answer above. New advanced course on LI seems to be even more tempting to go with:)
  • JeffreyRiley's avatar
    JeffreyRiley
    Community Member
    David this was great. I have an entry in the Elearning Heroes Challenge and had thought about animation paths. Fun to see that being applied. Thanks as always for the ideas and a template to follow.