Lottie files are JSON-based animations that work on any device. They are vector-based which means they can scale up or down without pixelation.
On this page
- How to create a Lottie file
- Editing a Lottie File
- Adding to the CMS
- Adding to a landing page
- See Lotties live on nsw.gov.au
Several Lottie files are already available for use across nsw.gov.au. These files are available in the Media Library and are available to view on the Lottie animation library.
How to create a Lottie file
If a new Lottie file animation is required, a motion designer needs to create an animated graphic and then export it to a Lottie file in JSON format. There is an Adobe After Affects and Figma plug-in for this.
Before creating a file
- You will need to add your brand colours as part of the LottieFile animation as the Lottie file will not inherit the colours from the CMS. A Lottie is a JSON-based animation file format that allows you to ship animations on any platform as easily as shipping static assets.
- If you do not find a Lottie file that suits your purposes, get in touch with your brand cluster representatives to have a new one created.
Editing a Lottie file
If you wish to edit an existing Lottie in the library there are several online tools available that let you alter the basic shapes and colours of the animation including:
Adding to the CMS
After a new Lottie file is created, it is uploaded to the media library.
Navigate to:
- Content
- Media
- Add media
- Lottie file
You will be presented with the Add Lottie file page.
A meaningful title is important as this is the only way you can identify your Lottie file – previews are not displayed in the media library interface.
Adding to a landing page
Currently you can add Lotties to landing pages using the:
See Lotties live on nsw.gov.au
Check out the Lottie Library to see how see how these work on a live page. You can also see how agencies have used this on their pages:
- My Career Planner – real-life stories (within each profile)
- Customers – State of the Customer
Need any more help?
If you have any questions, or require assistance with anything mentioned in this article, submit a request via the webform.