airbnb/lottie-web

This release delivers a comprehensive architectural overhaul of the Lottie player, introducing a modular, component-based system that separates rendering logic into distinct Canvas, SVG, and HTML5 backends. Key features include support for Web Workers to offload animation processing, new visual effects and shape modifiers, and centralized audio management. The update also brings significant performance optimizations through object pooling and state tracking, alongside a new automated visual regression test suite.

The player now supports rendering several new visual effects as SVG filters, including Gaussian Blur, Drop Shadow, Matte 3, Pro Levels, Stroke, Tint, Tritone, and Transform. These new SVG-based implementations allow for more consistent visual results across browsers that support SVG filters, supplementing the existing canvas-based rendering for these effects.

player/js/elements/svgElements/effects · high confidence

A new file, build/old\_parser/bodymovin\_parser.jsx, was added to provide a fallback JSON parser implementation. This includes polyfills for JSON.stringify and JSON.parse, along with date serialization helpers, ensuring compatibility with older environments or specific animation library requirements.

_build/old\parser · high confidence

A new marker parser utility has been added to the player's JavaScript utilities. This component is responsible for parsing marker data, supporting both JSON and key-value pair formats for marker payloads.

player/js/utils/markers · high confidence

Added BezierEaser.js, howler.js (including the Spatial Plugin), seedrandom.js, and transformation-matrix.js to the player's 3rd\_party directory. These additions provide new capabilities for handling complex easing curves, audio playback with spatial/3D positioning, deterministic random number generation, and 3D transformation matrix operations.

_player/js/3rd\party · high confidence

A new HTML demo page (player/index.html) was added to the player directory. It provides a standalone example of how to initialize and run a Lottie animation using the ES6 module import, configuring the SVG renderer with specific settings like title, description, and filter size.

player · high confidence

The player now supports transform and layer index effects, allowing users to apply transformation and layering visual effects to their animations. This includes new effect types such as Slider, Angle, Color, Point, Mask Index, and Checkbox, alongside the specific TransformEffect which handles matrix transformations, opacity, and scaling. These additions expand the range of visual effects available for animation projects.

player/js/effects · medium confidence

Added AudioController.js and AudioElement.js in the player/js/utils/audio directory. The new AudioController provides a centralized way to manage multiple audio instances, supporting operations like play, pause, resume, rate adjustment, and volume control. It also includes a fallback mechanism for audio playback when the primary audio library (Howler) is not available, ensuring consistent audio behavior across different environments.

player/js/utils/audio · high confidence

Added a new HTML5 rendering backend (HBaseElement, HCameraElement, HCompElement, HImageElement, HShapeElement, HSolidElement, HTextElement) that renders animations using native DOM elements and CSS transforms instead of relying solely on SVG or Canvas. This enables better performance and compatibility for 3D camera layers, masked shapes, and text elements in modern browsers, while maintaining the existing SVG/Canvas renderers for broader support.

player/js/elements/htmlElements · high confidence

The rendering system has been refactored into a modular architecture, introducing distinct Canvas and SVG renderers that share a common BaseRenderer interface. This change enables the player to dynamically select a rendering engine (defaulting to Canvas for performance) and supports headless or worker-based rendering scenarios. Users benefit from improved performance via the Canvas renderer and better accessibility features in the SVG renderer, such as title and description attributes.

player/js/renderers · high confidence

The codebase in the \player/js/elements\ directory has been refactored to introduce specific element classes for different layer types. A new \AudioElement\ is added to handle audio layer playback, volume, and time remapping. \FootageElement\ is introduced to manage footage layers, including expression interfaces. \BaseElement\ is created as a foundational class providing common initialization, blend mode, and expression interface setup. Additionally, \NullElement\ is added to handle null/empty layers, and \SolidElement\ is defined to render solid color layers. These changes separate concerns for audio, footage, and null layers, while establishing a more structured hierarchy for layer rendering.

player/js/elements · high confidence

The Lottie Web library has been updated to version 5.13.0, introducing support for the Web Worker to reset segments, improved expression support for accessing unidimensional values by index and thisProperty.name, and a fix for renderGradient cache invalidation. The release also includes performance improvements by avoiding static transform matrix recalculation and fixing issues with hidden styles and duplicate styles. Additionally, the build process has been migrated to use Rollup, and the project now includes ESLint configuration and TypeScript type definitions for better developer experience.

(repo-wide) · high confidence

The build process has been updated to support Web Workers, introducing new build scripts (build.js, build\_worker.js) and a file watcher (watch.js) to automate the generation of worker-specific bundles (lottie\_worker, canvas\_worker). This change enables the library to run animation rendering in a background thread, improving performance for complex animations.

tasks · high confidence

The canvas renderer now uses a dedicated set of element classes (CVBaseElement, CVCompElement, CVShapeElement, CVTextElement, etc.) to handle rendering. This introduces a new internal architecture for the canvas renderer, separating concerns like masks, effects, and shapes into their own components, which should improve maintainability and potentially performance for canvas-based animations.

player/js/elements/canvasElements · high confidence

The expressions module has been refactored into a modular, interface-based architecture. New files introduce dedicated interfaces for compositions (CompInterface), layers (LayerInterface), shapes (ShapeInterface), text (TextInterface), effects (EffectInterface), and project state (ProjectInterface). These interfaces expose animation properties (such as position, rotation, scale, and opacity) to the expression engine, enabling complex dynamic animations and property-driven effects within the player.

player/js/utils/expressions · high confidence

The player now provides a new set of entry points in the \player/js/modules\ directory to allow for more efficient bundling. The \full\ module includes all renderers (Canvas, HTML, SVG) and effects, while lighter modules (\canvas\, \html\, \svg\) and their corresponding \\_light\ variants expose only specific renderers. This structure supports tree-shaking and allows users to import only the rendering capabilities they need, such as \canvas\_light\ for basic shape modifiers or \html\ for standard SVG effects.

player/js/modules · high confidence

The player now supports several new shape modifiers and property handlers, enabling more complex vector animations and effects. A new ZigZag modifier allows paths to be distorted with a zigzag pattern. The Repeater modifier has been refactored to support animated properties, allowing for dynamic repetition counts and transformations. A Pucker and Bloat modifier has been added to distort shapes by moving their control points toward or away from the center. Additionally, a Round Corners modifier has been introduced to smooth out sharp corners on paths. The implementation also introduces new property handlers for Dash and Gradient properties, improving how these attributes are processed and animated. These changes expand the range of visual effects available for vector shapes in animations.

player/js/utils/shapes · high confidence

The codebase has been refactored by extracting shared logic into new helper modules under player/js/utils/helpers. This includes a dynamic property system for animated values, a blend mode mapping for visual effects, and specific enums for shape rendering (line caps and joins). Additionally, new modules provide DOM/SVG element creation, typed array utilities, and an asset manager that handles luma-based matte masks and offscreen canvas support, improving code organization and reusability.

player/js/utils/helpers · high confidence

The SVG rendering logic has been restructured into dedicated element classes (SVGBaseElement, SVGCompElement, SVGShapeElement, SVGTextElement) to improve code organization and maintainability. This refactoring introduces a new SVGEffects system for applying visual effects and supports additional SVG features like blend modes and matte masks. Users benefit from a more stable and extensible rendering engine that better handles complex animations and text rendering.

player/js/elements/svgElements · high confidence

The player's core logic has been reorganized into distinct utility modules, including new files for event handling (BaseEvent), data management (DataManager), font management (FontManager), and property interpolation (PropertyFactory, TransformProperty). This refactoring introduces a more modular architecture, separating concerns such as bezier curve calculations (PolynomialBezier), asset loading (asset\_loader), and feature detection (featureSupport) into their own files, which improves code maintainability and allows for better caching and performance optimizations in the animation rendering pipeline.

player/js/utils · high confidence

The player's JavaScript code has been restructured into distinct modules: a new EffectsManager handles layer and mask effects, a dedicated MaskElement class manages SVG mask rendering and dynamic properties, and a worker\_wrapper module provides a proxy for DOM and Canvas contexts to support Web Workers. Additionally, a main.js module centralizes global state and utility functions, while the module.js file exposes the public API, including methods for quality, volume, and animation control.

player/js · high confidence

The text rendering and animation system has been refactored to improve maintainability and performance. The previous monolithic implementations for text properties, animator data, and selector logic have been split into separate, focused modules: LetterProps, TextAnimatorDataProperty, TextAnimatorProperty, TextProperty, and TextSelectorProperty. This change isolates concerns, making it easier to debug and extend text-related features like animators, selectors, and dynamic property updates.

player/js/utils/text · high confidence

A change to existing behaviour in build/extension — 292 commits (12 fixs), 1 file.

build/extension · medium confidence · unverified

Added a new object pooling system in the player's utility layer to optimize memory allocation for animation data. This includes a generic pool factory and a pooling helper, alongside specific pools for bezier lengths, points, shape paths, and shape collections. This change improves performance by reusing pre-allocated memory for these frequently created objects.

player/js/utils/pooling · high confidence

The animation player logic has been refactored into a new \AnimationItem\ class and a centralized \AnimationManager\ to handle registration, playback, and lifecycle events. This change introduces a \WorkerOverride\ variant of both components, enabling the animation player to run in a Web Worker context for improved performance, while the main thread version retains full DOM access and standard rendering capabilities.

player/js/animation · high confidence

The player's element architecture has been refactored by splitting the previous monolithic element classes into specialized helper modules: FrameElement, HierarchyElement, RenderableElement, RenderableDOMElement, and TransformElement. This change introduces granular tracking of modification states (e.g., \\_mdf\, \\_matMdf\, \\_opMdf\) to optimize rendering cycles by skipping unnecessary updates. It also introduces support for local transforms via the \searchEffectTransforms\ method, allowing effects to modify layer transformations independently of the global hierarchy. Additionally, the \RenderableElement\ now explicitly manages layer visibility (\isInRange\, \hidden\, \isTransparent\) and transparency checks, ensuring that hidden or transparent layers are not rendered.

player/js/elements/helpers · high confidence

The Lottie player builds in the build/player directory have been updated to version 5.13.0. This release includes fixes for canvas sibling shapes with the same style, mask calculation errors, camera zoom, text animators based on words and percentages, and sourceRectAtTime for images, among other bug fixes.

build/player · medium confidence

The adrock demo has been updated with a new data.json file containing animation keyframes and shape layers. This update refreshes the visual content for this specific demo, likely reflecting changes in the underlying animation data or structure.

demo · high confidence

The player's SVG shape rendering logic has been refactored to improve maintainability and performance. New dedicated data classes (e.g., SVGFillStyleData, SVGGradientFillStyleData, SVGStrokeStyleData) and a ShapeTransformManager have been introduced to handle style properties, gradient updates, and transform sequences. The SVGElementsRenderer now explicitly manages rendering for fills, gradients, strokes, and paths, while the CVShapeData class handles canvas-based shape data. This change ensures that shape properties and gradients update correctly during animation, addressing issues where gradients and fills did not update with the SVG renderer.

player/js/elements/helpers/shapes · medium confidence

Added a new test suite in the \test/\ directory that uses Puppeteer to render Lottie animations across SVG and Canvas renderers. The test infrastructure includes an HTML page to drive the animation frames and a Node.js script that serves the necessary assets, launches headless browser instances, and captures screenshots for visual comparison, enabling automated detection of rendering regressions.

test · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• CAI 39 → 44 (+4.9)
• Rubric changed (rubric-2026.08.15 → rubric-2026.09.15) — scores are not directly comparable.

• Code Health 29 → 28 (-0.7)
• Architecture 91 (new)
• Maturity 61 → 52 (-9.0)
• Readiness 29 → 44 (+15.5)
• Security 90 → 92 (+1.7)

• (anonymous) (cognitive 16) (player/js/utils/bez.js)
• (anonymous) (cognitive 17) (player/js/worker_wrapper.js)
• CanvasRenderer (cyclomatic 26) (player/js/renderers/CanvasRenderer.js)
• Change coupling: CVBaseElement.js ↔ CVSolidElement.js (player/js/elements/canvasElements/CVBaseElement.js)
• Change coupling: CVShapeElement.js ↔ CVSolidElement.js (player/js/elements/canvasElements/CVShapeElement.js)
• Change coupling: ImageElement.js ↔ SolidElement.js (player/js/elements/ImageElement.js)
• Dimension evaluation failed
• FileTooLong: tasks/build.js (tasks/build.js)
• High: security finding (details withheld)
• High: security finding (details withheld)
• HybridRenderer (cognitive 19) (player/js/renderers/HybridRenderer.js)
• HybridRenderer (cyclomatic 20) (player/js/renderers/HybridRenderer.js)
• HybridRendererBase (cognitive 17) (player/js/renderers/HybridRendererBase.js)
• HybridRendererBase (cyclomatic 18) (player/js/renderers/HybridRendererBase.js)
• KeyframedMultidimensionalProperty (cognitive 36) (player/js/utils/PropertyFactory.js)
• KeyframedMultidimensionalProperty (cyclomatic 29) (player/js/utils/PropertyFactory.js)
• MaskElement (cognitive 41) (player/js/mask.js)
• MaskElement (cyclomatic 26) (player/js/mask.js)
• No exposed public API
• SVGProLevelsFilter (cognitive 54) (player/js/elements/svgElements/effects/SVGProLevelsFilter.js)
• …and 77 more

• (anonymous) (cognitive 18) (player/js/utils/expressions/LayerInterface.js)
• (anonymous) (cognitive 19) (player/js/utils/asset_loader.js)
• (anonymous) (cognitive 19) (player/js/utils/expressions/ExpressionValueFactory.js)
• (anonymous) (cognitive 24) (player/js/utils/expressions/EffectInterface.js)
• (anonymous) (cognitive 29) (player/js/animation/AnimationManagerWorkerOverride.js)
• (anonymous) (cognitive 36) (player/js/utils/imagePreloader.js)
• (anonymous) (cognitive 39) (player/js/animation/AnimationManager.js)
• (anonymous) (cyclomatic 118) (player/js/utils/DataManager.js)
• (anonymous) (cyclomatic 18) (player/js/utils/expressions/EffectInterface.js)
• (anonymous) (cyclomatic 19) (player/js/utils/expressions/ExpressionValueFactory.js)
• (anonymous) (cyclomatic 24) (player/js/animation/AnimationManagerWorkerOverride.js)
• (anonymous) (cyclomatic 25) (player/js/utils/imagePreloader.js)
• (anonymous) (cyclomatic 27) (player/js/utils/expressions/LayerInterface.js)
• (anonymous) (cyclomatic 32) (player/js/animation/AnimationManager.js)
• (anonymous) (cyclomatic 55) (player/js/worker_wrapper.js)
• (anonymous)::TransformProperty (cognitive 21) (player/js/utils/TransformProperty.js)
• (anonymous)::addFonts (cognitive 40) (player/js/utils/FontManager.js)
• (anonymous)::addFonts (cyclomatic 21) (player/js/utils/FontManager.js)
• (anonymous)::checkLoadedFonts (cognitive 20) (player/js/utils/FontManager.js)
• (anonymous)::createTree (cognitive 18) (player/js/worker_wrapper.js)
• …and 115 more

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

airbnb/lottie-web was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.