Making things interactive

With Shorthand it’s possible to make images interactive/scrollable without programming. It’s called the ‘scrollmotion effect’. For instance, in the graph below you will scroll through the different years and see how the fund evolves. With every scroll the information is updated (not in this blog, if you want to see the effect, take a look at the TTEITI story). So in a sense it’s more an animation effect, however the user determines the speed of the animation by scrolling.

When we started exploring the tool, we found out that it was really easy to use, but the interactivity was limited to uploading multiple pictures that are shown in sequence at a certainty speed when scrolling. The speed is based on the amount of text in that section divided by the number of images. As you can see on the screenshot below, its easy to upload multiple images on the right. You can click each image to change that specific picture or add captions.

Exploring the scrollmotion effect

So  we needed to figure out how to optimise this scrollmotion effect for the dataviz we had in mind. We created a Shorthand account and used information from the TTEITI report to create a Sankey diagram which shows how ownership in the oil sector moves (we initially made it in Rawgraphs.oi, then imported it to illustrator to add text and make the different frames for the scrollmotion effect).

For full screen graphs you can then add a transition effect to make the transition go smoother:

These transitions are nothing spectacular, it’s similar to what powerpoint can do. However, when used right, with the scrollmotion effect an image looks like it’s fully animated/interactive, while it’s just 3 or 4 images shown in sequence.