THE MOTION FIELD GUIDE
36 useful terms, explained through product examples. Understand the language of a motion brief, compare formats and plan the developer handoff.
36 terms
FORMATS
Lottie describes an animation as structured data that a compatible player renders at runtime. It can contain vector shapes and raster assets; file size and feature support depend on the export and player.
Example: A small confirmation icon plays after a successful upload.
Practical guide ↗Bodymovin is an After Effects extension used to export supported animation features as Lottie data. An After Effects preview is not proof that every effect will reproduce in every Lottie runtime.
Example: Export a shape-layer icon, then compare it in the intended web player.
Practical guide ↗dotLottie is a packaged animation format that can bundle Lottie data and associated resources. Capabilities such as themes or state machines depend on the package version and the runtime you choose.
Example: Deliver a packaged animation with its assets instead of a loose JSON and image folder.
Practical guide ↗Rive is a design and runtime system for interactive graphics and animation. Its editor supports state machines that respond to application inputs rather than only playing one fixed timeline.
Example: A character changes pose when a form input becomes valid.
Practical guide ↗JSON is a text format for structured data. A Lottie JSON file stores an animation description; ordinary JSON data is not automatically an animation and still needs the appropriate runtime.
Example: The player reads dimensions, layers and keyframe values from an exported file.
Practical guide ↗SVG describes graphics using shapes, paths and other XML elements. It is useful for scalable artwork, but complex SVG scenes still require rendering work and embedded raster images retain their resolution limits.
Example: A navigation icon stays crisp as its vector outline is resized.
Practical guide ↗GIF is a raster image format that can store a sequence of frames. It is convenient for simple image-like playback, but it is not a system for application states or responsive vector paths.
Example: Use a short looping email preview when the email client cannot run a web player.
Practical guide ↗MP4 is a media container commonly used to deliver video. Playback behavior and compression depend on the tracks and codecs inside it; the extension alone does not define visual quality or file weight.
Example: An explainer film is delivered as an MP4 for a video platform.
Practical guide ↗ANIMATION
Vector animation changes shapes and their properties over time. Geometry can scale cleanly, but a vector-based composition can also include images, fonts and effects that affect portability or rendering cost.
Example: Animate the stroke and scale of a checkmark without exporting a video frame sequence.
Practical guide ↗A raster asset stores an image as pixels. When a Lottie export embeds or references a photo, that image contributes to download size and can look soft if enlarged beyond its useful resolution.
Example: A product screenshot inside an animation is raster even if its surrounding icons are vector.
Practical guide ↗A keyframe records a property value at a particular point in an animation. Intermediate values are calculated according to the interpolation and timing defined between keyframes.
Example: Set an icon’s opacity to zero at the start and one at the end.
Practical guide ↗Easing controls how progress changes over time between animation values. It determines acceleration and deceleration, independently of where an object starts and finishes.
Example: A panel slows as it approaches its resting position.
Practical guide ↗A cubic Bézier curve is defined by two end points and two control points. In motion work it can describe a geometric path; in CSS timing functions it maps progress through a transition.
Example: Tune a timing curve so a button response starts quickly and settles gently.
Practical guide ↗Interpolation calculates values between known keyframes. The chosen method changes whether a property moves steadily, eases smoothly or holds its value until the next keyframe.
Example: An indicator’s position is calculated between its left and right states.
Practical guide ↗Frame rate describes the number of frames per second in an animation timeline or output. A source set to 60 fps does not guarantee 60 rendered frames per second on a visitor’s device.
Example: Test a 60 fps export on a phone instead of assuming its playback will be smooth.
Practical guide ↗A precomp is a composition nested inside another composition in After Effects. It groups a set of layers into a reusable unit, but its contents still matter when exporting or evaluating performance.
Example: Nest several icon layers so the group can move together in a larger scene.
Practical guide ↗A mask controls which parts of a layer remain visible. Animated masks can create reveals, but export support and runtime cost must be tested for the intended player.
Example: Reveal a progress fill inside the boundary of a rounded card.
Practical guide ↗Trim paths reveals or hides portions of a shape’s stroke by changing its visible range. It is often used for line-drawing effects; the exported result depends on supported shape features.
Example: Draw the outline of a checkmark over a short confirmation sequence.
Practical guide ↗An SVG morph changes one path shape into another. A smooth result needs compatible or normalized geometry and a suitable animation method; unrelated path point structures do not magically interpolate well.
Example: Transform a menu icon into a close icon with a planned shape transition.
Practical guide ↗A loop repeats a playback sequence. A seamless loop also matches its end and start visually; enabling repeat in a player does not remove a jump in the artwork.
Example: A loader returns to its starting pose without a visible pause or snap.
Practical guide ↗INTERACTION
A state machine defines possible states and the conditions that move between them. In an interactive animation, application events and inputs can select the appropriate visual behavior.
Example: A control moves from idle to loading, then to success or error.
Practical guide ↗A trigger is an event used to start a behavior or transition. A pointer click, keyboard action or application event can trigger motion; the animation should follow the actual product state.
Example: Play a success sequence only after the server confirms the action.
Practical guide ↗A hover animation responds when a pointer moves over an element. Touch and keyboard users need another usable interaction or a clear static state because hover is not available to everyone.
Example: An icon responds to mouse hover and offers the same action through focus and tap.
Practical guide ↗Scroll scrubbing maps scroll progress to a position on an animation timeline. It differs from simply starting playback when a section appears.
Example: Three product chapters advance as the visitor scrolls through a SaaS story.
Practical guide ↗A micro-interaction is a focused response around a small user action or system event. Motion can support that response, but meaning should remain clear without relying on movement alone.
Example: A save control changes label and icon after the item has been stored.
Practical guide ↗An onboarding animation explains a product, feature or first-use step through motion. Its purpose is to support understanding, not to force a user to wait before continuing.
Example: A short sequence shows where a newly imported data source will appear.
Practical guide ↗An empty state explains why an area has no content and what the user can do next. Animation is optional; the message and useful next action carry the essential information.
Example: An empty dashboard offers an Import data action alongside a restrained illustration.
Practical guide ↗A loader indicates that an operation is in progress. An indeterminate loader should not imply a precise completion percentage, and its finish must follow the real operation.
Example: A processing loop stops when the application receives its response.
Practical guide ↗DELIVERY
A runtime is the software that interprets animation data and renders or controls it in an application. Different runtime versions and platforms can support different features.
Example: Choose and test the web and mobile players before approving the final export.
Practical guide ↗A renderer turns an animation description into visible output. SVG and Canvas rendering have different implementation characteristics; the best choice depends on the scene and its environment.
Example: Compare a complex scene in the target renderer on the actual device.
Practical guide ↗A handoff is the agreed package of assets and implementation information passed to the receiving team. For motion, it should explain intended size, triggers, states, playback and fallback behavior.
Example: Deliver the approved export with a poster and notes for reset and reduced motion.
Practical guide ↗PERFORMANCE
Reduced motion is a user preference that an interface can respect by limiting nonessential movement. A static poster or immediate state change can preserve meaning while avoiding decorative animation.
Example: Show a confirmation icon without its bounce when reduced motion is enabled.
Practical guide ↗Lazy loading defers a resource until it is needed. It can reduce initial work, but the primary image needed for the first screen usually needs a different loading strategy.
Example: Load a below-the-fold demo near its section instead of downloading every animation at startup.
Practical guide ↗Intersection Observer reports when a target intersects a root or viewport. It can help pause offscreen animation, although intersection does not guarantee that an element is visually unobscured.
Example: Pause an illustration after its card leaves the visible page area.
Practical guide ↗Largest Contentful Paint measures when the largest eligible content element in the viewport is rendered. It describes loading experience; it does not measure every animation’s frame rate or interaction responsiveness.
Example: A large hero portrait can be the LCP element even when a small icon animates nearby.
Practical guide ↗Cumulative Layout Shift measures unexpected layout movement over a page’s lifetime using a session-window calculation. Reserving the dimensions of media helps prevent content from jumping when it loads.
Example: Give a video facade an aspect ratio so the heading below it stays in place.
Practical guide ↗No matching term. Try a shorter word or .
Tell me the action you want to explain, where it will happen and which devices matter. You do not need to choose the technical format before the conversation. Lottie animation services and the project estimator explain scope and starting prices.
Plan your animation ↗Definitions are written for this portfolio. These primary references provide further implementation detail; player support and software features should be checked for the version you use.
YOUR NEXT PROJECT STARTS HERE
A few details are enough to start. I’ll review your goals and come back with a scope, timeline and quote.
I’ll be your direct creative partner, from the first idea to the final handoff.
Watch my current introduction ↗Personal welcome video · coming soon“Sergey overprovided in no time! Super communicative and understanding.”
Chen Saban · Match Media · Client project feedback on Upwork ↗