Snake visualisation

Guide

• 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 nsw.gov.au corporate palette supplementary colour. 

Site examples

Women – State of the Customer

Customers – State of the Customer