# 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.  

## Setup
1. create a folder named just like the font you're using. The format should be [font family]-[font style]
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.