This week’s eLearning Challenge is #147, Accordion Interactions. I’ve recently been binge watching The Great British Bake Off, so I immediately thought of using the accordion layout for a recipe. This layout improves the content since it only displays as much information as the learner (in this case baker) needs at that moment. I decided to do a horizontal accordion layout that goes from side to side since it would be reminiscent of a cookbook.
The Method
I started out by creating my layouts on four different slides. Besides the basic layout, I also wanted to incorporate animations. I tried using transitions to see if that would be useful, but it wasn’t quite right. I decided to use a technique I saw in Jeff Kortenbosch’s Animated Menu Demo to create a really smooth experience.
On each content slide, I created three layers. On each layer, I had the accordion slide change color to indicate that it was clicked, then added in motion path animations to move the accordion tabs to the correct position.
I was then able to add in triggers. On the slide, there were three triggers that opened a slide layer.
On each of these layers, there are triggers to move one or more tabs on a motion path, then jump to a slide once they’ve finished. I had both the layer timeline and motion path animation set to one second each.
I did struggle with placing the motion path animations. There’s no precise way to tell Storyline where objects should end up; the size and position page only works for the object itself. To help with this, I created a grid structure on the Slide Master that marked the middle of the accordion tabs. Once I was done adding in the animations, I just flipped off the visibility of the grids.
The Result
Click here to see the full interaction. Click here to download the Storyline 2 source file.
0 Comments