Skip to content
Browse learning resources
GUIDE

Troubleshoot a composition

Find why a layer is missing, code draws nothing, a loop jumps, or rendering slows down with checks that isolate the cause.

On this page

Start with the smallest reproducible problem: one layer, one moment, and one unexpected result. Change one thing, inspect the same moment again, and keep the change only if it explains what happened.

A layer is missing

Check these in order before deleting or recreating it:

  1. Time: move the playhead inside the layer's clip. Inspect the start and end times, especially after changing composition duration.
  2. Visibility: check that the layer is shown. Review solo states on other layers.
  3. Isolation: hide competing visual layers temporarily. A full-frame background or another opaque visual may be covering the element.
  4. Appearance: inspect opacity and the layer's own controls. A visible layer can still draw content outside the frame or too small to notice.
  5. Code: if this is a code layer, read its diagnostics. A syntax or runtime error needs to be resolved before visual adjustments can help.

When the layer reappears, restore other layers one at a time. This identifies the interaction rather than merely hiding the symptom. See Compose with layers and clips.

Code draws nothing

Preserve your current source, then replace it temporarily with the complete frame callback example. You should see one cyan dot on a dark background.

If that works, the layer and basic drawing path are working. Restore your source in small pieces: first one static shape, then the repeated shapes, then the animation formula. Check diagnostics after each change.

Keep drawing commands inside motion.onFrame(). Read motion.time inside that callback so it reflects the current frame. Do not append every complete example to the same source: multiple registered callbacks can draw over or clear each other's output.

Motion is frozen or changes when scrubbing

A paused timeline intentionally displays a fixed frame. Start playback first. If the drawing remains still, check that a changing timeline value participates in the position, size, or other property you draw.

If scrubbing backward produces a different result at the same time, look for state accumulated across callbacks. For example, x += speed depends on how many callbacks have run. A formula derived directly from time returns the same position for the same time. The timeline concept guide explains this distinction.

Avoid generating new random positions on every frame when you want stable particles. For a reproducible pattern, derive placement from a fixed index or keep it deterministic. Random changes every frame create flicker and make comparison difficult.

The loop has a jump

First identify which property jumps. Check position, radius, rotation, color, opacity, and layer visibility separately. Temporarily remove secondary motion so you can test the main cycle alone.

A full-cycle sine or cosine returns to its starting value. Multiplying a duration-relative phase by an integer preserves repetition over the code clip; a fractional cycle generally does not. For a composition-wide loop, the clip must also span the whole composition. Matching positions alone is not enough if the direction or speed changes abruptly at the boundary.

Then inspect clip coverage. Finally, test the exported video with repeat enabled. The last rendered frame should advance naturally into the first frame; it need not be an exact duplicate of it.

The animation feels slow to preview or render

Distinguish the design's speed from the device's ability to render it. A slowly rotating object may be intentional; an unresponsive preview is a different issue.

Isolate layers and temporarily disable costly effects to find where the work increases. In code, reduce shape counts before simplifying the visual idea. A 20-by-20 grid draws four times as many shapes as a 10-by-10 grid.

For export, try smaller dimensions and 30 FPS using custom settings. If the simpler version completes, reintroduce complexity incrementally. Follow Export an animation for output-specific checks.

Prepare a useful support report

If the problem remains, record the action that triggers it, the expected result, and what actually happens. Include the browser and operating system, composition dimensions and duration, the affected layer type, and any exact error message.

For code problems, reduce the source to the smallest example that still fails. For timing problems, include the playhead time and clip interval. These details help distinguish an editor issue from a particular composition without asking someone to reconstruct your whole workflow.

Need a hand with this guide?Contact support