# Terminology Understanding key terms will help you get the most out of Lottie Creator. Here's a comprehensive glossary of concepts used throughout the application and documentation. ## Animation Terms ### Keyframe A point in time where a property value is explicitly set. Lottie Creator interpolates between keyframes to create smooth animation. ### Timeline The horizontal view showing the duration of your animation, with playhead, layers, and keyframes. Used to control timing and sequencing. ### Playhead The vertical line on the timeline indicating the current frame being viewed or played. ### Frame A single point in time in your animation. Lottie Creator uses frame-based animation (typically 30 or 60 FPS). ### Duration The total length of your animation, measured in frames or seconds. ### Easing The rate of change between keyframes, controlling acceleration and deceleration. Examples include Linear, Ease In, Ease Out, and custom bezier curves. ### Bezier Curve A mathematical curve defined by control points, used for both path shapes and animation easing curves. ### Work Area A defined range on the timeline used to focus playback or trim export to a specific section. ### Segment A named section of the timeline that can be referenced for playback control or state machine integration. ## Layer Terms ### Layer A single element in your composition, such as a shape, image, or nested composition. Layers stack in the outliner to create your final animation. ### Shape Layer A layer containing vector shapes (rectangles, ellipses, paths) with fill and stroke properties. ### Image Layer A layer containing a raster image (PNG, JPG) that can be animated. ### Precomposition (Precomp) See **Nested Scene**. A nested composition that acts as a layer within another composition. Used to organize complex animations or create reusable elements. ### Parent-Child Relationship A hierarchy where a child layer inherits the transform properties (position, scale, rotation) of its parent layer. ### Outliner The panel showing the hierarchical tree structure of all layers and shapes in your composition. ### Group A container that organizes multiple shapes or layers together, typically for organizational purposes or combined transformations. ## Scene & Composition Terms ### Root Scene The top-level scene in a Lottie Creator file. A root scene defines the main canvas dimensions, frame rate, and duration. Every file has at least one root scene. ### Nested Scene (pre-comp) A scene embedded within another scene as a layer. Nested scenes (also called pre-comps or precompositions) allow you to organize complex animations into reusable, self-contained units that can be referenced multiple times. ### Scene The main canvas or container for your animation, equivalent to a composition in other animation software. ### Composition A complete animation with defined dimensions, frame rate, and duration. Can be nested within other compositions as precomps. ### Canvas The visual workspace where you draw, edit, and preview your animation. ### Artboard The defined boundary of your composition, shown as a rectangle on the canvas. ## Property Terms ### Transform Properties The properties that control an object's position, scale, rotation, skew, anchor point, and opacity. ### Anchor Point The pivot point around which transformations (rotation, scale) occur. Can be positioned anywhere on or off the layer. ### Fill The interior color or gradient of a shape. ### Stroke The outline of a shape, with properties like width, color, opacity, dash pattern, and caps. ### Gradient A smooth color transition, either linear (directional) or radial (circular). Can be used for fills or strokes. ### Opacity The transparency of a layer, from 0 (invisible) to 100 (fully opaque). ### Blend Mode Determines how a layer's colors interact with layers beneath it (e.g., Multiply, Screen, Overlay). ### Mask A shape used to hide portions of a layer, creating cutouts or revealing effects. ### Matte A layer used to control the transparency of another layer based on its alpha (opacity) or luma (brightness) values. ### Trim Path A property that allows you to animate the visible portion of a path from start to end, useful for drawing effects. ## Interactivity Terms ### State Machine A system for creating interactive animations that respond to inputs and transition between different states. ### State A specific configuration or animation segment in a state machine. States can be Initial, Final, or regular states. ### Transition A connection between states that defines when and how the animation moves from one state to another. ### Input A variable that controls state machine behavior. Types include Boolean, Numeric, String, and Duration. ### Action An operation performed when a transition occurs, such as setting an input value, firing an event, or opening a URL. ### Interaction A user-triggered event that can trigger actions, including Click, Hover, PointerDown, PointerUp, PointerEnter, and PointerLeave. ### Condition Also known as a **guard**. A rule attached to a transition that must evaluate to true before the transition is allowed to occur. ### Immediate Transition A state change that happens instantly without animation. ### Tweened Transition A state change that animates smoothly from the current state to the target state. ## Motion Tokens Motion tokens are named, reusable design variables that store animation and style values. By referencing tokens instead of hard-coded values, you can update an entire animation's look and motion by changing a token in one place. Lottie Creator supports the following motion token types: ### Text Token Controls text content, font, size, and alignment properties. ### Color Token A named variable that stores a solid color value. Color tokens can be applied to fills and strokes across multiple layers; updating a token propagates the change everywhere it is referenced. ### Gradient Token A named variable that controls a multi-stop gradient, including stop colors and positions. ### Position Token Stores X and Y coordinate values, used to control the position of a layer or element. ### Scale Token Stores vertical and horizontal scale values. ### Rotation Token Stores a rotation value from 0–360 degrees. ### Opacity Token Stores a transparency value, controlling how visible a layer or element is. ### Skew / Skew Axis Token Controls the skew angle and the axis along which the skew is applied. ## Export Terms ### Lottie JSON The standard JSON format for Lottie animations, compatible with all Lottie players and libraries. ### dotLottie A compressed package format (.lottie) up to 80% smaller that can include animations, themes, state machines, and assets in a single file. ### Optimization The process of reducing file size and complexity for better performance, including path simplification and compression. ## Technical Terms ### ThorVG The WebAssembly-based vector graphics rendering engine that powers Lottie Creator's canvas. ## Path & Drawing Terms ### Path A vector shape defined by anchor points and bezier curves. ### Anchor Point (Path) A point on a path that defines its shape. Different from the layer's anchor point used for transforms. ### Bezier Handle The control point extending from an anchor point that defines the curve of the path. ### Vertex Type The type of connection at an anchor point: Curve (smooth), Corner (sharp), or Disconnected (independent handles). ### Closed Path A path where the last point connects to the first, creating an enclosed shape. ### Open Path A path with distinct start and end points, not forming a closed loop.