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

• A Professional Displayr license
• Server time for private dashboards to publish documents to the web
• A Document with at least one page and output to publish

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. From the toolbar, select the star to open the Animation Panel. You use this to edit the animations for the objects you select.
   
   
   This opens up the Animation pane.
   
   
   
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.
   The results are as follows:
   
   

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.
  
• Context menus (dropdown menus). Right-click on items in the list to remove the animation from an item in the list or start with the previous.
  
  
  

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 Publish > Publish as Web Pages.
2. Choose the level of access (for more information on publishing and the levels of access see: How to Publish a Document as a Web Page (Dashboard))
3. Press Publish or Republish if the document has been published before.
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)