Lottie Animation Development Flashcards

Question 1

What is Lottie, and what does it render in applications?

Accepted Answer

Lottie is an open source animation format that describes vector animation as JSON data. An application uses a Lottie player library to read that file and draw each frame using native or web graphics, so the animation scales cleanly and needs no video or raster frame sequence.

Question 2

Why do designers and developers choose vector JSON animation over video files?

Accepted Answer

Vector JSON animation stays sharp at any size because shapes are described mathematically rather than as pixels. Files are usually much smaller than video, they can be recolored or edited in code, and they can respond to user interaction. Video cannot offer those properties without larger files and visible compression artifacts at certain scales.

Question 3

What is the difference between a Lottie file and the player that plays it?

Accepted Answer

A Lottie file is passive data that describes layers, shapes, timing, and property values, while a player is the runtime library that parses that data and draws frames. The file never runs by itself. The player on each platform interprets the same JSON and controls playback and looping.

Question 4

What does the frame rate setting in a Lottie file control?

Accepted Answer

The frame rate setting defines how many frames per second the animation uses when it is played back in time. It determines the spacing between the timed frames that the player steps through. A higher value gives smoother motion but increases the number of frames the player must compute and render.

Question 5

What do the width and height fields in a Lottie file define?

Accepted Answer

The width and height fields define the intrinsic size of the animation canvas in pixels. The player uses these values as the default rendering size and to calculate the aspect ratio when the container is resized. Scaling the output then happens without changing the underlying vector paths.

Question 6

What is a layer in a Lottie animation and how is it organized?

Accepted Answer

A layer is one element in the animation timeline, such as a shape group, text, image, or precomposition. Layers are stacked in a defined order, and each has its own transform, timing, and visibility. Layers can be parented to one another so that a child follows the motion of its parent.

Question 7

What is a precomposition, and why do Lottie animations commonly use one?

Accepted Answer

A precomposition is a reusable group of layers stored as its own composition and placed as a single layer in another composition. In Lottie files, it appears as a referenced asset with its own layers. Reusing precompositions keeps the file organized and lets one set of motion appear in several places.

Question 8

What does the version field in a Lottie JSON file indicate?

Accepted Answer

The version field, stored as v, records the Lottie schema version the file was exported with. Players can use it to check compatibility with the features in the file. A player that is older than the file may skip or misrender newer features.

Question 9

What are the top-level properties of a typical Lottie JSON file?

Accepted Answer

Common top-level properties include v for version, fr for frame rate, ip and op for in and out points, w and h for dimensions, layers for the animation layers, and assets for referenced resources such as images and precompositions. Some files also include markers and fonts.

Question 10

What do the ip and op fields represent in a Lottie layer?

Accepted Answer

The ip field is the in point, the first frame where the layer becomes active, and op is the out point, the frame where it stops being active. Outside that range the layer is not rendered. Both values are measured in frames, so they depend on the frame rate defined for the animation.

Question 11

How are keyframed property values stored in the JSON structure?

Accepted Answer

Animated properties store a k field containing an array of keyframe objects. Each keyframe has a time value t, a start value s, and optional easing handles such as i and o. The player interpolates between consecutive keyframes to find the value at any frame between them.

Question 12

What does a static property look like in Lottie JSON compared with an animated one?

Accepted Answer

A static property stores its value directly under k as a number or array, with no keyframe list. An animated property sets a flag, usually a, to one and places an array of keyframes under k. Static values are cheaper to store and parse, so animate only the properties that truly change over time.

Question 13

What is the ty field used for on a layer object?

Accepted Answer

The ty field stores the layer type as a number, such as 4 for a shape layer, 3 for a null layer, 5 for a text layer, or 2 for an image layer. Type codes are defined by the format specification, so use the documented values rather than guessing.

Question 14

How do shape layers organize vector content such as paths, fills, and strokes?

Accepted Answer

Shape layers hold a shapes array made of groups, and each group contains items such as path geometry, rectangles, ellipses, fills, and strokes. Items are processed in order, so a fill placed after a path colors that path. Transform objects inside a group position and scale its contents.

Question 15

What is the purpose of the assets array and the refId field?

Accepted Answer

The assets array stores resources that layers reuse, such as embedded images, precompositions, and data for other compositions. A layer that uses an asset points to it with a refId value matching the asset's id. Reusing one asset across many layers keeps the file smaller.

Question 16

How does the parent field let one layer follow another?

Accepted Answer

The parent field holds the ind value of another layer, which becomes the parent layer. The child layer inherits the parent's transform, so moving or rotating the parent moves the child too. This structure lets complex motion, such as a character's limbs, be authored with simpler controls.

Question 17

What role do masks and track mattes play in a Lottie animation?

Accepted Answer

Masks and track mattes limit which parts of a layer are visible. A mask uses a path to show or hide areas of the layer it belongs to, while a track matte uses another layer's alpha or luminance as the visibility source. The player applies both during rendering without needing extra image files.

Question 18

What is a keyframe in an animation timeline?

Accepted Answer

A keyframe is a marked point in time where a property has a specific value. Between keyframes, the software or player calculates intermediate values automatically, a process called interpolation. Designers usually set keyframes at meaningful moments, such as the start, peak, and end of a motion.

Question 19

What does interpolation mean when a Lottie player renders a frame between two keyframes?

Accepted Answer

Interpolation means the player computes a value that falls between the start and end values of neighboring keyframes, based on how far the current frame is between their times. For a position property, this produces smooth movement across the canvas. The result is applied to the layer before drawing that frame.

Question 20

What is easing, and how is it expressed in Lottie keyframe data?

Accepted Answer

Easing controls the rate of change between two keyframes, so motion can accelerate, decelerate, or follow a curve rather than moving at a constant speed. In Lottie, easing is stored as cubic bezier handles, commonly named i for the incoming tangent and o for the outgoing tangent, each with x and y values.

Question 21

Why do linear keyframes often look mechanical in motion design?

Accepted Answer

Linear motion moves at a constant speed, so it starts and stops abruptly, which often looks unnatural. Real objects accelerate and decelerate because of physical forces, and viewers expect that rhythm. Applying ease-in and ease-out curves to keyframes usually makes the same movement feel more natural and polished.

Question 22

Which properties of a layer can typically be animated in Lottie?

Accepted Answer

Transform properties such as position, anchor point, scale, rotation, and opacity are the most common animated values. Shape properties, including path points, size, roundness, fill color, and stroke width, can also be keyframed. Text and mask properties can be animated too, though support varies across players.

Question 23

What is a bezier path, and how does it define a shape in Lottie?

Accepted Answer

A bezier path is a sequence of vertices with incoming and outgoing tangent handles that together describe the outline of a shape. Each vertex stores a position, and the handles control the curvature of the segment leading into and out of it. The player connects these segments to draw closed or open outlines.

Question 24

What does a hold keyframe do in Lottie animation?

Accepted Answer

A hold keyframe keeps a property at its current value until the next keyframe, producing a stepped change instead of a smooth transition. In the JSON, it is flagged with an h value of one. This is useful for abrupt changes such as a sudden color switch or a blinking element.

Question 25

How can designers create a looping animation in Lottie?

Accepted Answer

A looping animation is built by making the first and last frames match, so the motion repeats without a visible jump. Designers usually set the final keyframe values equal to the starting values. Playback loop behavior itself is controlled by the player, which restarts from the first frame when it reaches the end.

Question 26

How do you typically load a Lottie animation into a web page?

Accepted Answer

A typical web setup imports a Lottie player library and passes it a JSON file, either a URL or parsed data, along with a container element. The library then creates the rendering output inside that element. The developer can then control playback with methods such as play, pause, and stop.

Question 27

What rendering options do Lottie players commonly offer, such as SVG and canvas?

Accepted Answer

Many web players can render to SVG, canvas, or HTML elements. SVG output keeps vector crispness and is easy to inspect in the DOM, while canvas can handle heavier animations with fewer DOM nodes. The right choice depends on performance needs and how the animation must be styled or read by assistive technology.

Question 28

Why should developers set loop, autoplay, and speed options explicitly when using a player?

Accepted Answer

Player options define behavior that the JSON file itself does not control, such as whether playback starts automatically, repeats, or runs faster. Setting them explicitly makes the result predictable across different products and avoids relying on defaults that may change between library versions. It also simplifies testing.

Question 29

How can a developer play only a segment of a Lottie animation, such as an intro?

Accepted Answer

Most players accept a segment or frame range, often given as a start and end frame, so playback begins and ends at chosen points. Markers defined in the file can also serve as named ranges that code can reference. This lets one file provide several states, such as an intro, idle loop, and exit.

Question 30

What is the purpose of a dotLottie file compared with plain JSON?

Accepted Answer

A dotLottie file packages one or more Lottie animations, along with their images and a manifest, into a single compressed archive. The compression reduces download size compared with plain JSON, and bundled images avoid extra requests. The manifest lets a player choose among animations and settings in the package.

Question 31

How do developers handle an animation that must respond to a user's click or hover?

Accepted Answer

Developers listen for the interaction event in application code and call the player's controls in response. For example, a click can play a segment, while a hover can reverse direction or jump to a marker. The animation file itself does not contain event logic, so the application code must connect the interaction to playback.

Question 32

What is a common way to pause a Lottie animation when it is off screen?

Accepted Answer

A common approach is to observe the element's visibility, using a browser or platform mechanism such as an intersection observer on the web, and pause playback when the element leaves the viewport. Resuming playback when it returns avoids wasted rendering on hidden content. This practice conserves battery and CPU.

Question 33

What happens when a container's aspect ratio differs from the animation's dimensions?

Accepted Answer

The player fits the animation inside the container according to a scaling mode, such as contain, cover, or stretch, depending on the library and its settings. Contain keeps the full artwork visible with empty space, while cover fills the area and crops overflow. Stretch distorts the artwork, which is usually avoided.

Question 34

What usually makes a Lottie file large, and how can it be reduced?

Accepted Answer

Large files usually come from many layers, detailed bezier paths with excessive points, embedded raster images, and unnecessary keyframes. Reducing these by simplifying shapes, trimming unused layers, removing redundant keyframes, and compressing images typically shrinks the output. Exporting with options that remove hidden or unused content also helps.

Question 35

Why can embedded raster images reduce the benefits of using Lottie?

Accepted Answer

Raster images do not scale as cleanly as vector shapes, so they can look blurry at large sizes. They also add file weight that JSON data alone would not need. For these reasons, designers should prefer vector artwork when possible and use bitmap assets only where photographs or textures are essential.

Question 36

Why do some design features not translate into Lottie playback?

Accepted Answer

Lottie supports a defined subset of motion design features, and the exporter and players implement that subset. Effects that depend on the design application's rendering engine, such as many filters, complex expressions, and certain blend modes, may be unsupported or only partly supported. Designers should check compatibility before relying on them.

Question 37

What is the best way to troubleshoot an animation that renders incorrectly?

Accepted Answer

Start by isolating the problem: simplify the file by hiding layers until the defect disappears, then reintroduce them one at a time. Compare the output across the design preview and the player you ship, since differences often point to unsupported features. Validating the JSON and checking the player version also helps narrow the cause.

Question 38

What does a player do when a device cannot keep up with an animation's frame timing?

Accepted Answer

The player may drop frames or skip ahead in time so that playback stays in sync with the clock rather than falling further behind. This produces choppy motion but keeps the timing correct. Simpler layers, fewer shapes, and smaller images reduce the work per frame and make smooth playback more likely.

Question 39

How can many Lottie animations on one page affect performance?

Accepted Answer

Each active animation consumes memory, processing time, and sometimes DOM nodes, so many simultaneous animations can slow scrolling and interaction. Developers should limit the number that play at once, pause those out of view, and lazy-load players that are not needed immediately. Measuring on lower-end devices reveals problems that fast development machines hide.

Question 40

What should be checked to make a Lottie animation accessible?

Accepted Answer

Designers and developers should avoid flashing content that could trigger seizures, provide a way to pause or stop motion that runs longer than a few seconds, and respect the reduced-motion preference where the platform exposes it. Decorative animations should be hidden from assistive technology, while meaningful ones need text alternatives.

Question 41

How should a developer decide whether Lottie is the right format for a given animation?

Accepted Answer

Lottie suits vector-based motion such as icons, illustrations, and interface feedback that needs to scale and run on several platforms. It is less suitable for photographic video, very long content, or effects that depend on unsupported features. Comparing file size, playback quality, and interaction needs on target devices gives the most reliable answer.

Lottie Animation Development Flashcards

1Foundations of the Lottie format

2Structure of the JSON file

3Animating properties and easing

4Playing animations in applications

5Performance, size, and troubleshooting

Learning Resources