Snake visualisation

The snake block allows up to 6 statistic values to display in a timeline/snake-like animation.


Moving to the Help Hub

This guide has been moved to the Help Hub and will be removed from this page soon.

See the Help Hub guide

Before using the snake visualisation

  • You will need assistance and advice from UX/Design before using this component. 
  • Lottie files must be designed with the Supplementary colour as the Lottie file will not inherit the Supplementary colour.
  • Depending on the purpose of the page, you may want to discuss with UX/Design the use of a non-corporate colour palette.


  • Template: Landing page only
  • Section: Full width.
  • Note: any page section smaller will result in the snake animation to not display correctly. The snake line will break at the edges. 
  • Add custom block: Content Snake Block
  • Statistics colour: Defaults to Brand supplementary in the colour palette.
  • Animation sections (blocks) available: Maximum of 6

Create an animation section/block

  1. Add media is mandatory:  the only media you are able to select for use in this component are Lottie files (.json). 
    1. Lottie files must be designed with the Supplementary colour as the Lottie file will not inherit the Supplementary colour.

    2. You will need assistance and advice from UX/Design before using this component. 
  2. Text before and text after the statistic is optional.
  3. Statistic value is mandatory. The statistic value does not animate. Numbers, letters, special characters, can be entered.
    • While there is no character limit applied to the statistic value field, it is recommended to keep entry to this field as short as possible. 
  4. The Position of the item specifies the position of the value within the block.
  5. You can also select whether to Display current item or not on the page.

Snake example of how different characters/character lengths display in the statistic value field

Note that in this snake example, the Lottie files are reflecting the State of the Customer supplementary colour while the statistic is picking up the corporate palette supplementary colour. 

The text in the before WYSIWYG is optional.

71,000 - this value is mandatory

The text in the after WYSIWYG is optional.


Text in the after WYSIWYG only.

Text in the before WYSIWYG only

Alpha only statistic value

increase in mean NSW temperature from 1910 to 2020.

Top of page