DOCSEARCHbyAlgolia
Submit Docs

Lottie Documentation

repository·master·Indexed 26 days ago

https://github.com/airbnb/lottie

Central hub for Lottie documentation, providing guides for official implementations on Android, iOS, and Web. Includes detailed instructions for exporting After Effects animations via the Bodymovin extension, best practices for animation performance, and implementation guides for Android Compose using lottie-compose.

Tokens
20.4K
Snippets
50
Records
104
Agent score
87%

What's inside Lottie

  4. Optimize animation performance using render times

    master
    If an animation is slow, you can identify problematic layers using the Lottie sample app's render graph feature. Tap "View render times per layer" in the bottom sheet to see the time taken for each layer. To improve performance, try optimizing shapes, eliminating masks, removing mattes, or merging paths where possible.

  5. Debug Masks and Mattes

    master
    Masks and mattes have the largest performance impact in Lottie on Android. To debug and visualize them, call setOutlineMasksAndMattes(true) on your LottieAnimationView or LottieDrawable to outline all masks and mattes in the animation.

  6. Install the Bodymovin extension for After Effects

    master

    To export After Effects files as JSON for Lottie, install the Bodymovin extension using the following steps:

    1. Close After Effects if it is currently running.
    2. Install the ZXP installer from aescripts.com/learn/zxp-installer/.
    3. Download the latest Bodymovin extension (.zxp file) from the lottie-web GitHub repository.
    4. Install the extension: Open the ZXP installer and drag the downloaded bodymovin.zxp file into the installer window.
    5. Launch After Effects: You can find the extension under the menu Window > Extensions > Bodymovin.

  7. Workflow: Sketch/SVG/Illustrator to Lottie

    master

    Follow this workflow to convert vector artwork into a Lottie animation:

    1. Prepare Artwork (Sketch): Group all elements into a single group. Export the group as an SVG (preferred over PDF/EPS to avoid extra artboard paths).
    2. Prepare Artwork (Illustrator): If using Illustrator, open the SVG and save it as a .AI file.
    3. Import to After Effects: Drag the .AI file into the After Effects project window or use File > Import.
    4. Setup Composition: Drag the file to the composition icon. Go to Composition > Composition settings to set the Frame-rate (30fps or 60fps recommended) and Duration.
    5. Convert to Shape Layers: Select the layer, go to the Layer menu, and select "Create shapes from vector layer". This creates an editable Shape Layer with paths, strokes, and fills.
    6. Animate: Perform your animations on the Shape Layers.
    7. Export with Bodymovin:
      • Go to Window > Extensions > Bodymovin.
      • Select the target composition.
      • Select the destination folder using the three dots icon.
      • Click the green Render button.

  8. Contribute to Lottie documentation via GitHub web editor

    master
    Since the documentation is generated directly from markdown files in this repository, you can propose changes using the GitHub web editor without needing local git knowledge. Find the specific markdown file you wish to edit, use GitHub's web interface to propose changes, and once the changes are approved, they will be updated on the live site immediately.

  10. Update animation properties dynamically

    master

    You can modify animation properties at runtime (e.g., for theming or responding to events) using addValueCallback. To target a property, you need three components:

    1. KeyPath: A list of strings representing the After Effects hierarchy.
      • Use * (Wildcard) to match any single content name in that position.
      • Use ** (Globstar) to match zero or more layers.
    2. LottieProperty: An enumeration of the property to change (e.g., LottieProperty.COLOR).
    3. LottieValueCallback: A callback that provides frame and progress data to determine the new value.

    KeyPath Resolution: If you are unsure of your animation's structure, use resolveKeyPath(KeyPath("**")) on a LottieAnimationView or LottieDrawable to discover the hierarchy. Use the returned resolved KeyPaths for callbacks to avoid expensive tree walks during animation.

    // Example: Change a specific fill color based on animation progress
animationView.addValueCallback(
  KeyPath("Shape Layer", "Rectangle", "Fill"),
  LottieProperty.COLOR,
  { if (it.overallProgress < 0.5) Color.GREEN else Color.RED }
)

  12. Add a new file to the Lottie-iOS project

    master

    Because Lottie supports multiple distributions (CocoaPods, Carthage, NPM), adding files requires updating multiple targets:

    1. Place File: Add the source file to the appropriate directory in src/ based on its platform requirement (iOS, macOS, or both).
    2. Test CocoaPods: Navigate to /Example in your terminal and run pod install. Open lottie-swift.xcworkspace and build all target platforms to ensure compatibility.
    3. Update Carthage: Open Lottie.xcodeproj. Add the new file to the project, but uncheck 'Copy File when adding new files'.
    4. Set Target Membership: In the right panel, check the Target Membership for the new file. You must add it to the appropriate targets (there are two targets—one dynamic and one static—for each platform: iOS, tvOS, and macOS).
    5. Verify: Build all targets in Lottie.xcodeproj to confirm success.