Interactivity and animation

Interactivity can improve data visualisation and message understanding. It can help when comparing data, understanding processes or displaying extra information. Interactivity can be in:

• Interactive pages
• Interactive animated infographics
• Interactive videos
• Interactive charts and maps

▸ Interactive pages

Page interactivity happens in the page where we put the visualisations but outside of them. Normally we use two types of interactivity:

1. Trigger actions/animations on scroll

Our pages include a framework to configure actions with the users scrolls one of our pages. This can be used to start animations or videos when the users begins to see it and to stop them if the user stops seeing them.

Ask your developer to program this! It's not easy for someone who doesn't know how to program in Javascript.

2. Non-linear ways of presenting information

We can add hidden text to go in-depth certain issues without adding too much information. To accomplish this we have two tools: modals and hidden boxes. Hidden boxes will show the information on the page flow and modals open a "popup" that can be closed when the users want.

Hidden boxes

Creating hidden boxes is very easy as we have a shortcode and Wordpress plugin to do it. Click the "Add post element" button and select "caja escondida". Fill the form and it creates a link and hidden box.

This blog post has a hidden box. Click the link "Descubre lo que dice esta guía respecto a la carne" to see how it works.

Modals

Creating modals requires adding raw html code to the page. It's not required to know Javascript or CSS, just plain html.

1. Copy/paste the html example to an empty html file in your code editor (in your computer). Example code.
2. Edit the example html and add your content.
3. Upload the html file with your code/content in the Wordpress Media Library.
4. Add the html modal to the page by clicking the "Add post element" button and select "Import Text File". Fill the URL field as explained bellow the place where you must fill it.
5. Preview or post your page and click the link to confirm that the modal works as it should.

▸Interactive animated infographics

We can add interactivity and animations to our svg infographics, but we must plan it ahead and spend time developing and testing.

1. Organise your infographic to add interactivity afterwards

If you use Adobe Illustrator to design your infographics, make it easier to program interactions and animations by:

1. Organising elements in layers and naming this layers with meaningful names, according to their function. For example: background, main, buttons, boxes.
2. Using sublayers to create units and name them with meaningful names: help-button, return-button, help-box, hint-box. A sublayer should contain a unit/structure that the user interacts with.
3. Describing interactions in a separate text document. Use the previous layer and sublayer names in this descriptions.

Important: The four sizes should have the same layers and sublayers and use the same names. We'll try to keep the javascript as compatible as possible to save time and prevent mistakes.

2. Program interactions in your infographics

SVG infographics can have interactivity and this interactivity is programmed in javascript. We use the svgjs javascript library to program this interactions.

1. Start programing from properly organised Adobe Illustrator svgs with named layers and sublayers, as described previously in this page.
2. Add the links to the font files and svgjs as in this example.
3. Develop all in the interactions and animations for one of the four sizes and repeat and adjust for the other three.

3. Add animations

Generally, to create simple animations we just need to define the initial and end positions for each object, the timing and the event that triggers the animation.

Use svgjs and css to add simple animation to your infographics. We are looking into using Greensock for complex animations but so far it's not necessary and adds a lot of complexity.

▸ Interactive videos

Complex animations should be presented inside a video or interactive video. For more information see the video in the multimedia page of this guide.

▸ Interactive charts and maps

Charts and maps are interactive by default, and generally it’s fine to leave it as it is. Most of this interactions are discreet and useful.