Advanced Features: Overview

Beyond core functionalities, dotlottie-js harnesses the advanced capabilities of the dotLottie V2 specification. These features allow for more dynamic, interactive, and versatile Lottie experiences.

This section covers two key advanced features:

1. Theming:

   • Package multiple visual styles (e.g., color palettes, property overrides) within a single .lottie file.

   • Allow players to dynamically change animation appearance at runtime without needing separate files.

   • Useful for dark/light modes, brand variations, or state-based styling.

   • Explore Theming In-Depth

2. State Machines:

   • Define interactive logic to control animation playback.

   • Specify states, transitions, and event listeners (e.g., onClick, onHover).

   • Build complex interactive components like buttons, toggles, or mini-games directly within the Lottie format.

   • Explore State Machines In-Depth

These V2 features transform .lottie files from simple animation containers into rich, interactive packages. The following pages provide detailed explanations and examples of using dotlottie-js with these advanced functionalities.

Next up: Theming In-Depth