Replacing characters with compositions in AE

Replace Characters with Comps

Intro

lottie-web now supports switching individual characters for compositions.
This allows to define any character as a regular AE composition.
One of the uses for this is to animate characters along a text layer.
Supporting the font color is a work in progress. For now this works as an emoji character where original font color is ignored.

Setup

1. create a folder named just like the font you're using. The format should be [font family]-[font style]. Without the square brackets.
2. On your composition settings select "Replace Characters with Comps"
3. For each character you want animated, create a composition and name it as the character you want to replace

Special settings

Bodymovin will use the composition with and height to adjust the character properties, such as caret advance, initial x, initia y. You might want to decouple your composition properties from the actual properties of the character.
In order to overwrite them, you must add a comment to the composition starting with the word font and set those values manually. Here is an example of how to create the comment

font
x: 100
y: 100
advance: 150

These are the values that can be modified.

x

The x value will offset along the x-axis the character drawing. This means that the beginning of the drawing (which aligns with the caret position at that point) will start at that position.
By default, the value is 0.

y

The y value will offset along the y-axis the character drawing. This means that the beginning of the drawing (which aligns with the caret position at that point) will start at that position.
You should think of this value as the baseline where the character will be drawn.
By default, this value equals the height of the composition.

advance

The advance value refers to the amount of pixels along the x-axis the caret should advance in order to start drawing the next character.
By default this value equals the width of the composition.