Imagine you have a Lottie file filled with a vast amount of data and information, almost like a complex puzzle box. Now, imagine having a magical wand that allows you to delve into each Lottie file, examine each piece, and rearrange them to create something innovative and fresh. Pretty intriguing, isn't it? Well, that's precisely what relottie can do.

In this article, we will dive into the world of relottie and explore what all the excitement is about.

What is a relottie?

relottie is like a handy toolbox used while working with Lottie files. Instead of a single tool, it's a collection of plugins that let you do various things with your files.

relottie adds support for Lottie to unified - a collective of 500+ free and open-source packages that work with content as structured data Abstract Syntax Tree (ASTs). This enables relottie to connect with different kinds of content together effortlessly. It's particularly effective markdown (remark), HTML (rehype), Graphviz (redot), and natural language (retext) are frequently used to build projects like @mdx-js, @prettier, @gatsbyjs, and so much more!

Plugins

With relottie, you can use the pre-built plugins that you can use right away. These are ready-made tools for common tasks. However, if you have a specific need or want to do something unique with a Lottie file, you can create your custom plugin.

The current relottie repository contains the following packages:

  • last — type definitions for Lottie Abstract Syntax Tree (last)
  • last-builder — composable functions to easily build Lottie syntax tree (last) structures
  • relottie-parse — plugin to take Lottie as input and turn it into a syntax tree (last)
  • relottie-stringify — plugin to take a syntax tree (last) and turn it into Lottie as output
  • relottie — a unified processor with support for parsing Lottie's and serializing Lottie as output
  • relottie-cli — command line interface to inspect and change Lottie files with relottie
  • relottie-extract-features — plugin to extract Lottie features from the document

Examples: Extract Features

In this example, we've utilized the relottie-extract-features plugin to extract all features from a Lottie file.

In LottieFiles we use the relottie-extract-features plugin to show “Feature Support Checker” information for users in Workspace:

Examples: Color Change

Because relottie is based on the unified specification, we can use most of its utility packages. In this example, the unist-util-visit package has been used for recursively walking over nodes to find ColorRgba nodes and change their values. For references, you can find all feature node names in this last titles repository.

In the above examples, the dotlottie-web library has been used to render Lotties. You can read more about our player in this blog post here.

Syntax

relottie adheres to Lottie Abstract Syntax Tree (last) definitions that are based on the unififed specification, lottie-types and lottie-docs.

For example, for this small Lottie, that contains only the “v” (version) property:

{ "v": "6.0.0" }

Will be represented in the AST (Abstract Syntax Tree) format:

{
  "type": "root",
  "title": "animation",
  "hasExpressions": false,
  "position": {
    "start": {
      "line": 1,
      "column": 1,
      "offset": 0
    },
    "end": {
      "line": 1,
      "column": 17,
      "offset": 16
    }
  },
  "children": [
    {
      "type": "attribute",
      "key": {
        "type": "key",
        "position": {
          "start": {
            "line": 1,
            "column": 3,
            "offset": 2
          },
          "end": {
            "line": 1,
            "column": 6,
            "offset": 5
          }
        },
        "value": "v"
      },
      "title": "version",
      "position": {
        "start": {
          "line": 1,
          "column": 3,
          "offset": 2
        },
        "end": {
          "line": 1,
          "column": 15,
          "offset": 14
        }
      },
      "children": [
        {
          "type": "primitive",
          "value": "6.0.0",
          "position": {
            "start": {
              "line": 1,
              "column": 8,
              "offset": 7
            },
            "end": {
              "line": 1,
              "column": 15,
              "offset": 14
            }
          },
          "valueType": "string"
        }
      ]
    }
  ]
}

As you can see an AST node contains useful information that can be used for editing, creating, or validation. But we would like to highlight a few important properties:

  • title prop is Lottie’s qualified feature name. If it has a value “custom” - it means it is an unknown prop and not recognized by the relottie. Title names based on lottie-docs schema.
  • hasExpressions prop contains a boolean value whether the Lottie animation contains expressions.

For more node information - please check the last specification.

To sum up

As relottie continues to evolve, our commitment is focused in improving the user experience for designers and developers alike. We aim to achieve this by developing more tools and providing greater support for it.

If you're interested in diving deeper into the development of Lottie to support, check out the blog on ThorVG and also take a deep look into our all-new dotLottie web player.

Check out relottie today at GitHub, feel free to contribute and give us a star!