How to make an infographic historical timeline that compares different data?

Hi everybody!
I need a little help with this project. I’m trying to make a historical timeline where you can compare other information that happens at the same year. For example, the most important information is A and It’s always at sight for the user, you have other buttons with categories like society, culture and science. If you press one button, it will show you the category below the A.
But the problem is if you choose to show more than one category, how do I have to design the scenes in Hype?. I don’t know if I making myself clear.
I draw a simple graphic to show you the problem.

The thing is, how can I established where every category will appear? Do I have to make different scenes for every option, in case the user touch one or many buttons? Like one scene if the user touches society and culture, and another if the user touches culture and science, and another for the three buttons on sight, for example?

I hope you understand my problem!
Thanks in advance.

to solve the exact problem described above, you’d simply need to store the actual position and request the new position when a new item is chosen … but to be honest: i’d suggest that your request is much more complex than you described :slight_smile:

a samplefile is always a good starting point …

Thanks @h_classen! I know it’s really complex what I’m trying to achieve jajaja

You mean with jquery? Or is there a way to do it only with Hype?

if you want to realize a project with hype it’s best practice to do manipulation on hypeelements with hypes compabilities …

Hello Hans

Maybe this will help then click the “Epoques / Eras” button.

The goal here is to have an historical information during the life of some music composers.

The mobile infos was built within a very large horizontal Adobe Illustrator drawing. With such an approach, one can, for example see that JS Bach was already dead when Mozart was born and more over one can visually figure out the lifespan of each composer.

Hope this will help and if you dig in video postproduction, I suggest you check RippleTraining FinalCut Pro plugins like:

Since you can easily combine Hype with Video, you will have there an incomparable synergy.


JR Thibault

Here is a simple Project using JS.

The idea is to place the info box’s id into an array only if the are not in it already and need to be to displayed.
If they are in the array we remove the id. This acts as the Toggle

A second array holds 4 numbers which are the fixed positions we want the info boxes to be at.

We iterate over the display Array items and use the index number of the items in the array to pick the matching index item of the position array.

Then simply move the items in to the postion. Setting opacity and borders where needed. (17.6 KB)




1 Like