How Bodymovin Exports After Effects to Animated SVG

Exporting animations from Adobe After Effects to scalable, web-ready vector formats relies on extracting timeline data and translating proprietary layer information into standard web code. Bodymovin, an open-source extension for After Effects, facilitates this by parsing the composition’s vector paths, keyframes, and layer hierarchies into a structured JSON file. This data is then interpreted to generate natively rendered, lightweight animated SVG elements directly for the browser.

1. Composition Parsing and Data Extraction

When an export is triggered, Bodymovin utilizes the Adobe After Effects ExtendScript API to read the internal data structure of the active composition. The extension traverses every layer, pre-composition, and property in the timeline to capture: * Vector Geometry: Coordinate points of shape layers, path vertices, Bezier handles, strokes, and fills. * Transform Properties: Position, scale, rotation, anchor points, and opacity across time. * Keyframe & Interpolation Data: Spatial and temporal interpolation curves, including cubic Bezier velocity and influence values. * Masks and Mattes: Alpha mattes, clipping paths, and masking modes.

2. Serialization into Lottie JSON

The extracted properties are converted into a standardized, human-readable JSON schema (the format powering the Lottie ecosystem). Rather than saving raster frames or baked video files, Bodymovin represents visual components mathematically: * Paths are stored as arrays of coordinate deltas and Bezier control points (\(v\), \(i\), \(o\) coordinates). * Keyframe animations are stored as timestamped property changes paired with timing curves rather than flattened frame-by-frame data. * Layer hierarchies, blending modes, and parent-child relationships are preserved as nested objects.

3. Translation to SVG Nodes

To output an animated SVG, the underlying engine (powered by lottie-web) translates the JSON properties into standard Document Object Model (DOM) elements: * Shape layers and paths become <path>, <rect>, <circle>, or <polygon> elements inside an <svg> wrapper. * Groups and parented layers are mapped to <g> container tags. * Masks and track mattes are converted into <clipPath> or <mask> definitions inside the <defs> element. * Solid colors and gradients are mapped to standard SVG fill, stroke, <linearGradient>, and <radialGradient> attributes.

4. Animation and Keyframe Rendering

Bodymovin provides two primary methods to animate the resulting SVG:

• JavaScript-Driven Dynamic Rendering (Lottie-Web): The JSON data is rendered at runtime using the lottie-web SVG renderer. Using requestAnimationFrame, the library calculates the exact state of each vector path, transformation matrix, and style at the current frame based on the original Bezier easing formulas, updating the SVG element attributes dynamically.
• Standalone/Baked SVG Export: When exporting directly to a standalone animated .svg file without external JSON dependencies, Bodymovin compiles the animation data into native SMIL (<animate>, <animateTransform>) tags or embedded CSS keyframe animations. This binds the path morphs and spatial changes directly to the elements for native browser playback without external script dependencies.

5. Optimization and Vector Constraints

Because web SVG rendering relies on standard vector markup, Bodymovin selectively parses only After Effects features that have web equivalents. Standard vector shapes, shape modifiers (like Trim Paths), and primary transform properties export cleanly with zero pixelation at any display scale. Complex raster effects, native 3D camera projections, and third-party plugins are excluded or baked into raster image assets to maintain high performance and low file sizes.