Tell stories with animated and interactive data visualizations

Numbers on a spreadsheet don’t have the power to entice and interact with people the way moving stories do. These days, we gravitate towards interactive content that responds to our gestures and indulges our curiosity. That’s why Infogram offers powerful features designed to help you build unforgettable stories:

 
Note: These options are available only in template projects: infographics, reports, slides, dashboards, social media posts, and posters.

Enabling scroll-activated chart animations

Infogram embeds have always had a subtle animation when you first load the page. Now, charts can load one-by-one with the viewer as they scroll through your work – leaving them pleasantly surprised by the movement and new content appearing as they interact with your webpage.

 
You may want to know: For Team accounts, this setting is only available to Admins. Open Manage teams to select the Team account you’d like to access.
  1. Open your Account settings.
  2. Switch to the Project Settings tab.
  3. In View experience, choose one of the available options under Scroll-Activated Chart Animations:

    View_experience.png

  • Show object animation at once: all charts and maps will load at the same time when the viewer opens the page where your Infogram content is embedded.
  • Show one by one on screen: charts and maps will load one by one when the viewer scrolls through the page where your Infogram content is embedded.

    wow_show_charts_on_scroll.gif

You can also remove the chart animation completely:

  1. Select your chart (one click).
  2. Expand the Chart properties tab in the right-side settings panel.
  3. Deselect the Animate setting.

    Animate.png

Adding animations to objects

You can have objects appear however you’d like as viewers scroll through your infographics and reports. Set your animations to zoom, fade, bounce, flip, and slide effortlessly into your project – grabbing the attention of your viewers and keeping them engaged.

 
You may want to know: Animations are not available with projects created in the Responsive web and mobile layouts editor.
  1. Open a new project and select the object you want to animate by clicking on it.
  2. Click on Add animation in the right-side settings panel.
  3. Choose the Animation type from the panel on the right. When hovering over animations, they are previewed on the canvas.
  4. Adjust the animation you have selected. You can: 
  • Set the duration of the animation
  • Set a delay to the animation (choose when you want specific objects to appear)
  • Select the distance of the animation (this can be used on particular entrance and exit animations)
  • Set whether you want the animation to play once when visible (the object will be animated just once when loaded onto the page), always (the object will be animated in a repeated loop), on scroll into view (animations will appear/disappear as you scroll down/up the page), or on click (on-click animations are available in multi-page projects that include page transitions)
  • Preview the changes that you have introduced
  • Change the animation to a different one whenever you want
  • Delete the animation by clicking Remove

    Animations.gif

  • You can access and edit the animations of all objects by expanding the Animation overview tab in the settings panel on the right.

    Animation_overview.png

Enabling interactivity hints

Enable slick interactivity hints alerting your viewer to layers of additional helpful material. That way, nobody will miss your links, tooltips, zoomable maps, legends, or tabs!

  1. Open your project.
  2. Click on the Project viewer experience tab in the Settings panel on the right and enable the Show interactivity hints option.

    Show_interactivity_hints.png

  • Open the project in a preview, web-view, or where it is embedded to see hints appear (see the example below)!

    interactivity_hint.gif

Log into Infogram to build your own moving infographics and reports!

 

Create an animation