-
-
Notifications
You must be signed in to change notification settings - Fork 2.9k
Text
Text can be exported as glyphs or text data. On the Bodymovin panel, go to the settings of the composition you want to export and check or uncheck the glyphs option.
If you select glyphs, texts will be converted to shapes.
You don't need the actual font on the browser.
All the chars will be bundled on the json file.
It will export only the characters used on the animation only once per font, weight, style and char.
If you uncheck the glyphs option, only text strings will be exported.
After rendering, the AE plugin will request some font info to load the font on the browser.
You need to provide at least the font-family name or a class to include in the DOM element.
The plugin supports loading fonts from Google Fonts, Adobe Typekit or a custom path.
If you don't provide a font path, you can load them yourself later.
If you load fonts yourself, make sure fonts are loaded before loading the animation because it relies on glyphs size to display text correctly.
Many properties of the text animators are supported for exporting:
- Enable Per-character 3d (check the 3d page for more info about this)
- Anchor point, position, scale, skew, rotation, opacity
- fill color (RGB)
- stroke color (RGB)
- tracking
- Anchor Point grouping
- Group alignment
- Range selector
- Units
- Based on
- Amount
- Shape (Round and Smooth look similar but not exactly the same)
- Ease High
- Ease Low
- Randomize order (random will be different each time)
- Expression selector
- Text boxes can't contain more than one style (AE doesn't expose multi font text layers).
- Many paragraph and character settings are not supported yet.
- Some fonts have special combinations of chars that are spaced differently than default. These are not supported yet, they will be spaced as any other char and you might notice some differences.
- Some fonts can't be converted to glyphs on AE and will result on an error on the plugin. I've seen this behavior specially with fonts that simulate pixelled fonts.
- If you use Typekit fonts, make sure you load them on a single kit, and provide for each font the css Selector displayed on the kit editor.