Using Accordion Interactions in E-Learning #350: Challenge | Recap
Accordion interactions let course designers chunk long content into shorter pieces that learners then click to explore. Us...
Published 4 years ago
Version 1.0
Blog Post
As COP26 just ended last week, I did a demo showing six insights on investing for net-zero, based on a short brief published by the Stockholm Environment Institute. You can also find the source in the demo.
https://koeninger.s3.eu-central-1.amazonaws.com/portfolio/ELC350/story.html
https://koeninger.s3.eu-central-1.amazonaws.com/portfolio/ELC350/story.html
- I appreciate the use of the scroll bar here. It's an aspect I have not trialed yet. I also find the expansion to be smooth. Did you use transitions as it shows layers, or did you use the Move animation somehow?
- I mainly use motions paths and the wipe animation for each element. You can download the story file here:
https://koeninger.s3.eu-central-1.amazonaws.com/portfolio/ELC350/elc350.story
You'll see that each accordion from 2 to 6 have two motion paths for going up and down. Within the accordion group, you can find the image for the rectangle which has the wipe animation for the state "open".
