Canvas

The canvas is your primary workspace in Lottie Creator. It is where you design, edit, and preview your animation visually. The viewport controls what portion of the canvas you are looking at and how zoomed in you are.

What is the canvas

The canvas is the rectangular area that displays your animation scene. You use it to:

•View and edit layers visually
•Draw shapes and paths
•Position and transform elements
•Preview animation playback
•Interact directly with layer content

The canvas works alongside the timeline:

•The canvas controls spatial layout
•The timeline controls time and keyframes

Both views are always connected.

Scene size and coordinates

The canvas displays your scene at a defined size.

•Default scene size is 512 by 512 pixels
•Scene size is set in scene settings
•Zoom does not change the scene size

Coordinate system:

•Origin 0,0 is at the top left
•X increases to the right
•Y increases downward

This matches standard screen and web coordinates.

Zooming the canvas

Zoom changes how large your scene appears in the viewport. It does not affect the animation itself.

Common zoom levels:

•Below 100 percent shows more of the scene
•100 percent shows actual pixel size
•Above 100 percent shows more detail

Ways to zoom:

•Keyboard shortcuts
•Zoom menu in the toolbar
•Mouse wheel or trackpad gestures (ctrl/cmd + scroll)

Essential shortcuts:

•Cmd or Ctrl + Plus to zoom in
•Cmd or Ctrl + Minus to zoom out
•Cmd or Ctrl + 0 to zoom to fit (frame the whole scene in the viewport)

For preset levels such as 100 percent, use the zoom dropdown in the header toolbar.

Panning the canvas

Panning moves the viewport without changing zoom.

•Drag using mouse scroll wheel click
•Select the Hand Tool with H or from the toolbar, click and drag
•Pan using a trackpad

Canvas display options

You can adjust how the canvas looks without affecting export.

Options include:

•Background color
•Transparency checkerboard for alpha preview
•Scene bounds outline

The scene bounds show the edges of your animation. Content outside these bounds may be clipped on export.

Right-click an empty area of the canvas (not on a layer or path handle) to open the canvas context menu. It groups shortcuts for pasting, showing or hiding panels and guides, and zooming the view.

Paste

•Paste — Cmd/Ctrl + V (dimmed when the clipboard has nothing you can paste here)
•Paste as new scene — Option/Alt + Cmd/Ctrl + V

Panels, UI chrome, and guides

•Expand/Collapse timeline — Cmd/Ctrl + .
•Show/Hide UI — ` (backtick / grave accent key, often the same physical key as tilde)
•Show/Hide rulers — Shift + Option/Alt + R
•Show/Hide guides — Shift + Option/Alt + ;

Zoom

•Zoom in — Cmd/Ctrl + +
•Zoom out — Cmd/Ctrl + -
•Zoom to fit — Cmd/Ctrl + 0

These match the shortcuts in the menu; you can use the same actions from the keyboard without opening the context menu.