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.
...
Published 12 years ago
Version 1.0
Blog Post
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 without it. I thought it looked better.
In the .story file, I created a scene showing the steps to build the timeline. The link to the demo is here:
http://bit.ly/IhW8pG
And link to the .story file:
http://bit.ly/1jM4EbW
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 without it. I thought it looked better.
In the .story file, I created a scene showing the steps to build the timeline. The link to the demo is here:
http://bit.ly/IhW8pG
And link to the .story file:
http://bit.ly/1jM4EbW