How to Add Animations to Published Dashboards

When you create a dashboard in Displayr, you may want to make it more dynamic by adding animation effects to control the order in which the items appear on a page. For example, you may want a table to appear first and a visualization second.

Please note that the animations are not automated, but instead they are controlled by user-performed keyboard commands.

Requirements

• Server time for private dashboards to publish documents to the web.

Method

There are three steps to creating an animated presentation

• Design your dashboard in Edit mode
• Publish your dashboard as a web page
• View the presentation in View mode

Step 1:  Design your dashboard

1. In the tools menu, select Animate, select the star to open the Animation Panel. 
   
   
   
2. Click the item on the page you want to animate. In this example, I will select the table on the left:
   
   
   
3. In the Animation Panel, click the Appear button to add the animation to the object.
   Observe that a small "1" will appear next to the table.
   

The animation pane consists of the following components:

• Effect Pane: The two options are None or Appear. Click None to remove animation from an item and Appear if you want an item to appear as viewers move through the published dashboard.
  

• List of animated items on the selected page: In this example, the four items correspond with the items on the page. The numbering reflects the order in which they will appear as viewers move through the animation.
  

• Up and down controls: use the Up and Down controls to change the animation order. The numbers for each animated item on the page will also be renumbered to reflect this order.
  

• To Remove an object from the animation sequence, right-click and select Remove.
  

• To show two (or more) objects in the same animation step, select Start with previous.  This will assign the same sequence number to each object on the Page and change the list to indicate that objects go together, like this.
  

• To make an object appear on its own again, right-click it once more and select Start on click.
   

Step 2: Publishing your document

Once your animations are set up, they will only appear in a published dashboard in View mode, rather than Edit mode.

1. When you're ready to publish, go to Share > Publish to web.
2. Choose the level of access (see: How to Publish a Document as a Web Page (Dashboard))
3. Press Publish. If the document has been published before, click Republish.
4. To view the published document, press the Open in new tab button.

Step 3: Using the animations

Viewers must use the following keyboard shortcuts to move through the animations: 

• To step forward through the animations or advance to the next page use any of these keys:
  • N
  • Enter
  • Page Down
  • Right arrow key
  • Down arrow key
  • Spacebar
• To move backward through the animation or go to the previous page, use these keys:
  • P
  • Page Up
  • Left arrow key
  • Up arrow key
  • Backspace

Here's an example of the finished product while clicking on the right arrow key to step through the animation:

Next

How to Publish a Document as a Web Page (Dashboard)