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)
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
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, 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.
Guard
A condition that must be true for a transition to occur, such as "input > 5" or "isHovered == true".
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.
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.
Theming Terms
Theme
A collection of color definitions that can be applied to an animation, allowing for color variations without re-exporting.
Color Slot (Token)
A named color variable that can be referenced by multiple properties across different layers. Changing the slot updates all linked properties.
Slot Linking
The process of connecting a layer's color property to a color slot, making it dynamic and theme-aware.
Document Colors
An automatically generated palette showing all colors used in the current animation.
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.
DotCreator
An extended format that includes Lottie Creator-specific features like state machines and themes.
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.