I see many accordion interactions being used in courses. The E-Learning Heroes even had a challenge surrounding this topic. The examples posted were all very cool, but I didn’t see one that had a good flow to the interaction. It always seems that when the user clicks the accordion button that the interaction “jumps” to the content instead of flowing to it.
This just bugged me so I decided to try my hand at creating one that would flow like an accordion. It took a lot of time and patience to get all of the timings correct! It still isn’t perfect, but I do like the results much better. Check it out below:
The key to this interaction is the motion paths applied to each shape and text box. They were really tricky to get to the correct landing spot, but worth the effort. Then the triggers had to be correct to make everything go off without a hitch. Also, I disabled the red rectangle until the blue one was clicked so that the red wouldn’t overlap the blue. If you really want to take the time, you could add more triggers that will move the blue with the red if the red is clicked first, but I didn’t think it was necessary for this example.
Shown here are the triggers that I had one the base layer.
I also had two layers that showed the content and the transparent rectangle background. I added wipe animations to each item on the layer to give that flowy effect that I was looking for in this interaction. I recommend setting triggers on these layers to disable the buttons once they have been clicked. This is because the interaction will overlap itself if the button is clicked again. Does that make sense?
So that is it! I felt accomplished after getting everything to work together!