How to access text data in a precomposition using Lottie web

When working with Lottie Web to manage and access text data within pre-compiled animations, it is essential to understand Lottie's fundamental principles and how to programmatically control animation elements. Lottie Web is a widely used library that enables developers to incorporate animations exported from Adobe After Effects into web applications, with these animations commonly stored in JSON format.

Step 1: Confirm the Presence of Text Layers

Prior to programming, verify that your Lottie animation includes text layers. This typically requires collaboration with the animation designer to ensure text layers are included in the After Effects project and exported correctly as JSON.

Step 2: Initialize the Lottie Animation

In your web project, the first step is to correctly import and initialize the Lottie library, then load your animation. For example:

javascript
import lottie from 'lottie-web';

const animation = lottie.loadAnimation({
  container: document.getElementById('lottie'), // Animation container DOM element
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'path/to/your/animation.json' // Path to the animation JSON file
});

Step 3: Access and Modify Text Data

As Lottie animations are rendered on the web via SVG or Canvas, directly accessing and modifying text layers within the animation can be challenging. Lottie does not natively support dynamic modification of text content in loaded animations, but this can be achieved through specific techniques.

Method 1: Dynamic JSON Replacement

Prior to loading the animation, you can modify the JSON data to change the text content. This involves reading the JSON file, updating the relevant text values, and then reloading it into Lottie.

javascript
fetch('path/to/your/animation.json')
  .then(response => response.json())
  .then(data => {
    // Update text layer values
    data.layers.forEach(layer => {
      if (layer.t && layer.t.d.k[0].s.t) {
        layer.t.d.k[0].s.t = 'New text content';
      }
    });

    // Reload the animation
    lottie.loadAnimation({
      container: document.getElementById('lottie'),
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData: data
    });
  });

Method 2: Using DOM Manipulation

For already loaded animations, especially when using the SVG renderer, you can directly modify text values within the SVG using DOM manipulation. This requires locating the specific text elements in the SVG.

javascript
const textElement = document.querySelector('#lottie svg text');
if (textElement) {
  textElement.textContent = 'New text content';
}

Summary

While Lottie does not natively support dynamic modification of text content within animations, this can be accomplished by either pre-modifying the JSON data or using DOM manipulation afterward. Each approach has its advantages and disadvantages, and the selection depends on your specific requirements and the animation's complexity.