WHEDA History Timeline

Rough sketch of animated timeline
Design

For WHEDA's 45th anniversary, the Marketing department wanted an animated timeline of historic events to celebrate WHEDA's history. Events from each year, along with relevant images, were identifited, and design could begin. Timelines typically flow either horizontally or vertically. Without "scroll-jacking" the user, a horizontal timeline would never be able to display the amount of content necessary for 45+ years of history; a vertical timeline would be the working design.

To break up the visual flow on screen, events would display on both sides of the timeline, with dots on the line denoting events. Simple text boxes around the content for each year also featured small arrow-points identifying which "dot" the box belonged to. Declaring the year first, text second, and optionally images third, a style pattern was established for presentation.


Interactions

The main "interaction" on the page is animating the events in as the corresponding dot scrolls into view. Odd yeared events (on the left) animate in from the left, while even yeared events (on the right) animate in from the right. Because 45 events creates lots of content, I also created a return to top link that fades in after the timeline begins. Hovering on the return to top changes the color and visually animates the text and icon up, signifying what will happen when clicked.

Screenshot of the animated timeline

Outcome

The 45th anniversary celebrations were so well received, and garnered enough pageviews (over 30,000 in just two months of being published) that after the celebratory year was over, the timeline was moved to WHEDA's about page, replacing the static text history that had been in place for years.

View the Timeline