Lottie Clip

The Lottie Clip is a specialized clip type designed to integrate After Effects animations into the SDK using Lottie (opens in a new tab). This allows you to render After Effects compositions directly on the canvas and even modify text and image elements within those compositions.

Our implementation leverages Lottie's canvas renderer, which ensures high performance and efficient drawing cycles. However, be aware that Lottie files come with certain limitations compared to the full feature set of After Effects. For detailed information on supported features, visit the Lottie supported features (opens in a new tab) page.

To convert After Effects files into Lottie JSON format, refer to the guide available here: Convert After Effects to Lottie (opens in a new tab).

Tips for Converting After Effects to Lottie JSON

Render Text as Glyphs: If you want to make text editable later, include a hidden layer containing all characters in the specific font. This ensures that all necessary glyphs are generated. Make sure to check the Export Hidden Layers option.
Bake Keyframes: Baking keyframes can improve performance and compatibility.

Creating a Lottie Clip

To create a Lottie Clip, first ensure that your Lottie animation JSON file is hosted and accessible via a URL. If your After Effects composition includes additional assets, ensure they are also accessible.

import { Engine, LottieClip } from "@rendley/sdk";
 
const lottieClip = new LottieClip({
  dataUrl: "/path/to/data.json",
  assetsUrl: "/path/to/assets/folder",
  startTime: 0,
});
 
const layer = Engine.getTimeline().createLayer();
 
// Add the Lottie clip to the layer
await layer.addClip(lottieClip);

The assetsUrl parameter is optional and only necessary if your After Effects composition includes external assets.

Replacing Data

Several Lottie properties can be modified through the SDK, including text, images, and fill colors. To replace these elements, you’ll need the path to the layer containing the element and the new data. The path is represented by layer names separated by /, for example, nm1/nm2/nm3.

Replacing Text

To replace text in a specific layer:

lottieClip.replaceText("Comp1/layer2/textLayer", "New Text");

Replacing an Image

To replace an image in a specific layer:

lottieClip.replaceImage(
  "Comp1/layer2/imageLayer",
  "https://myimage.com/image.png"
);

Replacing the Fill Color

To replace the fill color in a specific layer:

lottieClip.replaceFillColor("Comp1/layer2/layer3", "#FF0000");

For a comprehensive list of all supported properties and methods, be sure to check out the API Reference.

Image Clip Subtitles Clip