Rebuild This Interactive Timeline #13

Interactive Timelines #13: Challenge | Recap

This week’s challenge idea comes from community member David Baker who shared a really cool timeline example in the E-Learning Heroes forums.

There’s a lot going on in this interactive timeline. The timeline is a menu slide that branches to different events. It features colorful rollovers and menu items that shift and expand when clicked. 

View the interactive timeline

Challenge of the week

This week, your challenge is to rebuild Big History Project’s interactive timeline.

This is our first challenge where everyone is working from the same source project. The tool you use to recreate this project will impact your design considerations. For example, the dynamic menu effect is not possible with most tools. You’ll want to capture the essence of the effect, whichever tool you choose.

Recreating existing projects is a great way to practice your course design and technical skills.

Discussion questions

Along with your project, share some insights about how you approached your project.

  • How long did it take you to build your demo?
  • How did you approach your design and development? Did you sketch out the project? Or did you jump right in and start building?
  • What was the biggest challenge you encountered?
  • Would you do anything differently?

Provide feedback

This is a good opportunity to practice evaluating and critiquing projects. Because everyone’s working from the same starting point, it’s easier to spot differences between projects and provide constructive feedback on another user’s project. Here are a few ideas to get you started:

  • What do you like about the demo?
  • What did they do really well?
  • Is there a tip or suggestion you would offer the designer?
  • What did you learn from the demo?


You can use Articulate Storyline, Articulate Studio ’09, or Articulate Studio ’13, to show and share your interactive timeline.

Last week's challenge

Before jumping into this week’s timeline challenge, check out the timeless examples your fellow community members shared in last week’s interactive infographic challenge:

Have an great timeline this week, E-Learning Heroes!

Even if you’re using a trial version of Studio '13 or Storyline, you can absolutely publish your challenge files. Just sign up for a fully functional, free trial, and have at it. And remember to post your questions and comments in the forums; we're here to help. For more e-learning tips, examples, and downloads, follow us on Twitter.

Jeff Kortenbosch

Here's my entry for this weeks challenge: UPDATE: The main idea came from here: There where a couple of things I was struggeling with: a) how do I make my timeline scrollable horizontally. I solved it by removing the player buttons and making it completely transparent. Then setting the width of the canvas really wide. b) how do i display my 'more' info. I was going to use a lightbox slide but with a super wide canvas that didn't really work because my lightbox became just as wide. I could fake a lightbox, using layes, ut didn't really like it. Then I thought of one of the previous infographic challenge and added content below the timeline. All in all I am pretty h... Expand

Ana Lucia Barguil

Hi Jeff, your timeline looks really good, the large width has a very good effect. It was a good solution to add more info below it. I tried to rebuild the example proposed by David. The first part was easy, to create the initial animation. But the open and close animations were more complicated, and I couldn't reproduce it like the original. I chose to keep the default width, thinking of tablet users, and this constraint made the timeline to be too cramped. There are still a few problems, like the titles moving on top of the vertical lines. I also had to reduce the width of the horizontal bars and simplify some features of hover state. I've made two versions, in the first I tried to reproduce the open-close effect, but I thought it was looking a bit weird, so I also made another slide w... Expand

Paul Alders

Hey everyone, It took a while, but finally I can share my contribution of this weekly challenge with you. I already posted it on twitter, but the animations were not smooth enough. So here is the link to my contribution; Let me also share some background information about the process that I went through during the design. I got inspired by the timeline callouts from Final Cut (editing software that I use a lot for my EduChunks ). Although I direct dove in the process of design two things were the most important for me to accomplish. The animations had to be as smooth as possible and I wanted enough space for content like tekst en images. Well my biggest challenge in this was the design of... Expand

Kevin Thorn

This took longer than I anticipated. Most do! Finished last week but visiting family and holiday weekend took me offline for a few days. I took the clone route and accepted the challenge to recreate the Big History Project as close to the original as possible. For comparison, here's the Big History Project official link > Here's my contribution > The first challenge was approaching the visuals. I stole...I mean, cropped a few graphics/images from the official site. It's a demo so no intention of using this as a project. The only images borrowed were the small icons below each number and the video intro images. There are two each for 'normal' and 'hover'. Everything... Expand

Eimear O'Neill

Here is my contribution of the original. Like Kevin - took longer than expected. Used SL. Went by the original. Used based image editing. I copied the main start template and pasted it through so I didn't delete the hover states that show description in each step.. All in all ..found it more detailed and time consuming than I expected. Good lessons learnt though :) Much like Ana the width issue was vital to determine at beginning but took some playing around with to get all info in. Such a shame SL doesn't have motion path animation :( Lovely job Ana - v smooth! Jeff I liked your interpretation - great width! Paul: very nice effect using Motion 5! Kevin yours turned out great too..fab imag... Expand

David Glow
Jackie Van Nice

Here's my entry. I didn't look at anyone else's first since I didn't want to be influenced in any direction - but I took a look just now and enjoyed them all very much! - How long did it take to build? Not sure, but I'd guess maybe 6 hours or so. - How did I approach it? I did a sketch on paper first to make it easier to organize and build. - The hardest part? I chose to create it using Storyline's native animation and image-creation capabilities, so maybe the only hard part was to remind myself that it was a good interpretation and to not to get caught up in trying to re-create every detail of the original. - Would I do anything differently? I don't think so. Given the amount of time I had to work on it, I'm pretty happy with it. :) Here it is: Expand

Jackie Van Nice

Thanks, David! I'm sure it would have taken less time if this were the sort of thing I was knocking out every day. To answer your questions: -Was it valuable? Definitely: 1. It was a great exercise in thinking through how something could be built in Storyline, and kind of a confidence-builder since the mechanics of it worked out as I'd planned. I've had a lot more trouble engineering things that look far simpler than this! 2. It was a great exercise in creating something unlike what I normally do. Getting practice at creating a piece in a particular style and within pretty narrow parameters is good preparation for real-world challenges, too. 3. It was a good exercise in letting go of wanting it to be identical to the original and realizing it still looks pretty darned good worki... Expand