← Back to Blog

JSON Animation Tutorial: From Export to Verified Integration

A reliable workflow does not end when Bodymovin creates a JSON file. The export must be inspected, tested against platform-sensitive features, integrated with explicit lifecycle behavior, and measured in the target app.

1. Define the runtime contract before export

Write down the target platforms, player libraries, container aspect ratio, background, loop mode, interaction, reduced-motion fallback, and asset-loading policy. These constraints decide which After Effects features are safe and how the file should be packaged.

  • Choose a frame rate that matches the motion need instead of copying a composition default.
  • Name layers and markers for the states developers must control.
  • Prefer vector shapes when practical; document every required raster asset and font.
  • Avoid assuming that an expression or effect supported on web is supported on mobile.

2. Export and inspect the JSON

Export with Bodymovin or another Lottie-compatible tool, then keep the original composition, exporter version, and settings with the artifact. Load the JSON into the viewer and compare dimensions, duration, layer count, asset count, markers, and file size with the handoff contract.

Use the layer tree to find unnamed layers, unexpected hidden layers, masks, effects, 3D flags, and parent relationships. If the file fails minimum validation, first check JSON syntax and the required composition fields rather than renaming an arbitrary JSON file.

3. Interpret suggestions as review prompts

The analyzer can flag embedded images, expressions, duplicate shape paths, dense keyframes, oversized images, hidden layers, and missing markers. A flag is not proof that the animation is wrong. It identifies a property that can affect file size, maintainability, compatibility, or runtime work.

  • Follow the related-layer link and confirm the finding in the source composition.
  • Change one export decision at a time and compare metadata after each export.
  • Use the documented score breakdown; do not treat a grade as a device benchmark.

4. Integrate, measure, and add fallbacks

Copy the relevant starter snippet, then replace the placeholder asset path and adapt lifecycle behavior, error handling, accessibility, and framework conventions. Test initialization and cleanup during navigation so player instances do not leak.

Measure download, parse, first-frame, memory, and frame behavior in the real container. Test missing assets and unsupported features. Provide a static or reduced-motion alternative when motion is non-essential or the user requests less motion.