UPCOMING WEBINAR: Run Research Your Way With AI Skills Register now >>

Articles in this section

See more

How to Add Animations to Published Dashboards

  • Updated
Follow

When you create a dashboard in Displayr, you can make it more dynamic by adding animation effects to control the order in which 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; they are controlled by user input via keyboard commands.

mceclip0.png

Requirements

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. 
    Animation menu.png
  2. Click the item on the page you want to animate. In this example, I will select the table on the left:
    mceclip0.png
  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.
    mceclip10.png

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.
    mceclip9.png
  • 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.
    animate 5.png
  • 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.
    animate 6.png
  • To remove an object from the animation sequence, right-click and select Remove.
    animate 8.png
  • 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.
    animate 7.png
  • To make an object appear on its own again, right-click it once more and select Start on click.
    animate 9.png 

Step 2: Publishing your document

Once your animations are set up, they will appear only in a published dashboard in View mode, not in 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 already been published, 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:

animation.gif

Next

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

Related articles