What is the JSON file structure of Lottie animations and what are its main components?

The JSON file structure of Lottie animations contains the following main parts:

1. Top-level Structure

json
{
  "v": "5.7.0",              // Lottie version
  "fr": 30,                  // Frame rate
  "ip": 0,                   // In point (start frame)
  "op": 90,                  // Out point (end frame)
  "w": 800,                  // Width
  "h": 600,                  // Height
  "nm": "Animation",         // Animation name
  "ddd": 0,                  // 3D flag
  "assets": [],              // Assets array
  "layers": []               // Layers array
}

2. Layer Structure Each layer contains the following properties:

json
{
  "ddd": 0,                  // 3D flag
  "ind": 1,                  // Layer index
  "ty": 4,                   // Layer type (4 = shape layer)
  "nm": "Shape Layer",       // Layer name
  "sr": 1,                   // Scale ratio
  "ks": {},                  // Keyframe properties
  "ao": 0,                   // Auto orient
  "ip": 0,                   // In point
  "op": 90,                  // Out point
  "st": 0,                   // Start time
  "bm": 0,                   // Blend mode
  "shapes": []               // Shapes array
}

3. Keyframe Properties

json
{
  "a": {                     // Anchor point
    "a": 0,
    "k": [400, 300, 0],
    "ix": 1
  },
  "p": {                     // Position
    "a": 1,                  // 1 means has keyframes
    "k": [
      {
        "i": {x: 0.833, y: 0.833},  // Bezier control point (in)
        "o": {x: 0.167, y: 0.167},  // Bezier control point (out)
        "t": 0,                     // Time
        "s": [0, 0, 0]              // Value
      },
      {
        "t": 45,
        "s": [400, 300, 0]
      }
    ],
    "ix": 2
  },
  "s": {                     // Scale
    "a": 0,
    "k": [100, 100, 100],
    "ix": 3
  },
  "r": {                     // Rotation
    "a": 0,
    "k": 0,
    "ix": 6
  },
  "o": {                     // Opacity
    "a": 0,
    "k": 100,
    "ix": 7
  }
}

4. Shape Structure

json
{
  "ty": "gr",                // Type: gr=group, el=ellipse, rc=rectangle, sr=star, sh=shape
  "nm": "Group",             // Name
  "it": [                    // Shape items array
    {
      "ty": "sh",            // Shape
      "ks": {
        "k": {
          "i": [[0, 0], [0, 0]],  // In control points
          "o": [[0, 0], [0, 0]],  // Out control points
          "v": [[0, 0], [100, 0], [100, 100], [0, 100]],  // Vertices
          "c": true              // Closed path
        }
      }
    },
    {
      "ty": "fl",            // Fill
      "c": {
        "a": 0,
        "k": [1, 0, 0, 1]    // RGBA color
      },
      "o": {
        "a": 0,
        "k": 100             // Opacity
      }
    },
    {
      "ty": "st",            // Stroke
      "c": {
        "a": 0,
        "k": [0, 0, 0, 1]
      },
      "o": {
        "a": 0,
        "k": 100
      },
      "w": {
        "a": 0,
        "k": 2               // Stroke width
      }
    }
  ]
}

5. Layer Types

• ty: 0 - Pre-comp layer
• ty: 1 - Text layer
• ty: 2 - Image layer
• ty: 3 - Null object
• ty: 4 - Shape layer
• ty: 5 - Solid layer

6. Assets

json
{
  "u": "images/",            // Asset path
  "p": "image.png",          // Filename
  "w": 100,                  // Width
  "h": 100,                  // Height
  "id": "image_0"            // Asset ID
}

7. Masks and Mattes

json
{
  "ty": "mask",              // Type
  "mode": "a",               // Mode: a=add, s=subtract, i=intersect
  "pt": {                    // Path
    "a": 0,
    "k": {
      "i": [[0, 0], [0, 0]],
      "o": [[0, 0], [0, 0]],
      "v": [[0, 0], [100, 0], [100, 100], [0, 100]],
      "c": true
    }
  },
  "o": {
    "a": 0,
    "k": 100                 // Opacity
  },
  "x": {
    "a": 0,
    "k": 0                   // Feather
  }
}

8. Effects

json
{
  "ty": 21,                  // Effect type
  "nm": "Drop Shadow",       // Effect name
  "np": 5,                   // Number of parameters
  "mn": "ADBE Drop Shadow",  // Match name
  "ix": 1,                   // Index
  "en": 1,                   // Enabled
  "ef": [                    // Effect parameters
    {
      "ty": 0,               // Slider
      "nm": "Opacity",
      "mn": "ADBE Drop Shadow-0001",
      "ix": 1,
      "v": {
        "a": 0,
        "k": 50
      }
    }
  ]
}

9. 3D Transform

json
{
  "ty": "tr",
  "p": {                     // Position
    "a": 0,
    "k": [400, 300, 0]
  },
  "a": {                     // Anchor point
    "a": 0,
    "k": [0, 0, 0]
  },
  "s": {                     // Scale
    "a": 0,
    "k": [100, 100, 100]
  },
  "r": {                     // Rotation
    "a": 0,
    "k": [0, 0, 0]           // X, Y, Z rotation
  },
  "rx": {                    // X rotation
    "a": 0,
    "k": 0
  },
  "ry": {                    // Y rotation
    "a": 0,
    "k": 0
  },
  "rz": {                    // Z rotation
    "a": 0,
    "k": 0
  },
  "o": {                     // Opacity
    "a": 0,
    "k": 100
  }
}

10. Gradients

json
{
  "ty": "gf",                // Gradient fill
  "g": {
    "p": 2,                  // Gradient type: 1=linear, 2=radial
    "k": {
      "a": 0,
      "k": [
        {
          "t": 0,            // Time
          "p": 0,            // Color position
          "c": [1, 0, 0, 1]  // RGBA color
        },
        {
          "t": 0,
          "p": 1,
          "c": [0, 0, 1, 1]
        }
      ]
    }
  },
  "s": {                     // Start point
    "a": 0,
    "k": [0, 0]
  },
  "e": {                     // End point
    "a": 0,
    "k": [100, 100]
  },
  "h": {                     // Gradient angle
    "a": 0,
    "k": 90
  }
}