# Layer Types Lottie Creator supports several layer types, each designed for specific purposes. Understanding layer types helps you choose the right tool for your animation needs. **Shape Layers** — vector-based layers containing shapes (rectangles, ellipses, paths, stars). Primary building blocks for vector animations. Shape Layer **Precomposition Layers** — references to nested compositions for organization and reuse. Can be entered for editing (double-click). Precomp **Text Layers** — layers containing editable text with font, size, alignment, and color properties. Text can be animated and tokenized. **Image Layers** — bitmap/raster image assets (PNG, JPG). Cannot edit pixels in Lottie Creator. Image Layer **Group Layers** — containers for organizing shapes within a shape layer. Not standalone layers. Group Layer ## Shape layers Shape layers contain one or more vector shapes and their appearance properties (fills, strokes). **Creating shape layers:** 1. Select any shape tool (Rectangle, Ellipse, Pen, etc.) 2. Draw on the canvas 3. A shape layer is automatically created containing the shape **Shape layer properties:** **Transform:** Position, rotation, scale, opacity, anchor point **Appearance:** Fill color (solid or gradient), stroke color, width, and opacity, blend mode **Advanced:** Track matte settings, parent-child relationships, visibility, lock state ## Precomposition layers Precomposition layers reference nested compositions, enabling scene organization and reusability. **Creating precomp layers:** 1. Select layers in timeline/outliner 2. Right click, and then select "Create scene" 3. The selected layers move into a new precomp 4. A precomp layer is created in their place **Precomp properties:** Standard transform properties (position, rotation, scale, opacity) **Precomp Size** — width and height of nested scene **Bounds Mode** — Scene bounds vs fit to content **Referenced Asset** — which precomp asset it uses **Entering/exiting precomps:** Precomp layers and scenes can be navigated using tabs above the Timeline ## Text layers Text layers display editable text on the canvas with full control over typography and appearance. **Creating text layers:** 1. Select the **Text Tool** from the toolbar 2. Click on the canvas to place a text layer 3. Type your content **Text layer properties:** **Content** — editable text string **Font** — font family and weight **Size** — font size in pixels **Alignment** — horizontal text alignment (left, center, right) **Color** — fill color, supports motion tokens **Transform** — position, rotation, scale, opacity, anchor point ## Image layers Image layers display raster/bitmap images in your animation. **Creating image layers:** 1. Import an image asset to asset library by dragging it onto the canvas from your computer. (Alternatively, click the "Upload Asset" button on the left side bar) 2. An image layer is created **Limitations:** Cannot edit pixels (use external editor) Raster images increase file size Use appropriate resolution ## Group layers Group layers organize multiple shapes within a shape layer. **Creating groups:** 1. Select multiple shapes within a layer 2. Use the group command (cmd/ctrl + g) 3. The selected shapes are moved into the new group **Group properties:** Transform properties (position, rotation, scale, opacity) Shapes inside inherit group transform Can be nested (groups within groups) ## Common layer properties All layers share these properties: **Transform:** Position, rotation, scale, opacity, anchor point **Blend Modes:** 16 blend modes available (Normal, Multiply, Screen, Overlay, etc.) **Visibility and Locking:** Eye icon toggles visibility, lock icon prevents editing **Draw Order:** Lower draw order = rendered on top. Layer 0 is topmost.