HistropediaJS Timeline Renderer – New features

During the next few months we’re rolling out some very cool new features and options and for HistropediaJS, our JavaScript library for creating interactive timelines. This includes some impressive looking animations and several key improvements related to timeline scrolling.

Here’s an overview of what’s coming:

Smoother and easier timeline scrolling

If we have done our job right you may not even notice these changes. The aim of the new features is to improve the way in which you interact with the timeline, and to prevent annoying movement of events as you scroll through time.
The result should be a much improved user experience, especially when someone arrives at the timeline for the first time.

UPDATE (1st May 2017): This is now live in HistropediaJS v1.0.3 – Read about the changes in our newsletter announcement.

Move and Fade animations

If you have already seen either of our HistropediaJS showcase timelines (e.g. US Presidents timeline) you may have already noticed some new animations that adjust the vertical space between events to fit all the events on the screen. This automatic row spacing is just a basic example of the new animation features we’re working on.

The first animations we’ll release this month are move and fade. The move animation will mean that events on the timeline don’t jump to new positions as you zoom and scroll, instead they will animate to their new location. This looks really impressive, but also means you don’t lose track of events as you zoom in or out.

Our existing ‘Priority Display‘ feature can dynamically hide/show events according to their rank as you zoom in and out on the timeline (when event density is set to ‘low’, ‘medium’ or ‘high’ in the timeline options). The problem is that end users can sometimes think events have disappeared completely instead of being temporarily hidden until they zoom back in. The new fade animation solves this by smoothly fading events in and out. It also makes filtering the timeline look and feel much smoother!

Move and fade animations will be turned on by default, but can be easily turned off in the HistropediaJS options.

UPDATE (22nd August 2017): This is now live in HistropediaJS v1.0.4 – Read about the changes in our newsletter announcement.

Period line stacking options

Period lines are designed to give you a quick graphical representation of the duration of events on the timeline. The new option will allow you control the order in which the period lines are stacked when they overlap one another.

In the current version, period lines are always stacked by duration. This means that the longest period lines are placed closest to the timeline with the shorter ones stacked on top. This new feature will allow you to choose to stack by duration, start date, end date or rank.

As well as the features listed above, there are numerous bug fixes, user interface improvements and handy new functions on the way. A full list will be included with the announcement of each new version.

UPDATE (21st Jan 2018): This is now live in HistropediaJS v1.0.5 (along with some additional bonus features!)  – Read about the changes in our newsletter announcement.

---

If you would like to be notified when the new features are available you can sign up to our HistropediaJS newsletter here.

For more information on the HistropediaJS Timeline Renderer, please visit the HistropediaJS home page.

As always if you have any questions please tweet to @histropedia, or contact us directly.