Workspace

Workspace areas

Expressive Animator provides a clean and highly intuitive user interface divided into logical areas to improve productivity and ease of use.

1. Application bar
2. Canvas area
3. Properties panel
4. Timeline panel
5. Toolbar
6. Panel controls
7. Layer panel or Settings panel, depending on context

Application bar

The application bar hosts multiple types of controls, grouped into three logical categories: action, contextual, and application controls.

Action controls

Zoom control

You can use this control to read an modify the current zoom level. Click on the control's button to open a dropdown with preset zoom levels. You also have options to fit the zoom level to:

• Document - fit to document area
• Selection - fit to current selection
• Element - fit to active element

View control

This control also provides options for guides, grids, ruler, and render modes. Click on the control's button to open a dropdown with all the available options. The control also provides two shortcut buttons:

• - Show or hide the rulers
• - Clip the document view to artboard's bounderies

The following options as provided by this control:

• View ruler - Show the rulers
• Grid
  • Show grid - show the grid
  • Front grid - draw the grid on top of all graphic objects
  • Transparency grid - show the transparency grid on background
• Guides
  • Show guides - show the guides
  • Lock guides - lock the guides
• Rendering
  • Clip document - clip the document view to the document's artboard boundaries
  • Pixel preview - view how the objects would be rasterized
  • Wireframe - in wireframe mode no fill or stroke are applied to objects

Snapping control

Use the button to toggle snapping on or off. Click on the control's button to open the dropdown menu and configure snapping behavior.

Spacing control

This control provides options for aligning and distributing objects. The control is composed from two buttons: a contextual button that execute the last align or distribute action (default is Align left), and a button that opens a dropdown with all the available options. The icon of the contextual button changes depending on the last action.

Path operations control

As the name suggest, this control allows users to perform various path operations on the selected vector objects. The control is composed from two buttons: a contextual button that execute the last operation (default is Unite), and a button that opens a dropdown with all the available options. The icon of the contextual button changes depending on the last operation.

The following path operations are available:

• Unite - Unites two or more paths into a single path.
• Subtract Front - Subtracts the top path from the bottom path.
• Subtract Back - Subtracts the bottom path from the top path.
• Intersect - Results in a path that is the intersection of the selected paths.
• Exclude - Results in a path that cuts the intersections out.
• Merge - Combines all path contours.
• Split - Split a path into its constituent contours.
• Divide - Divides a path based on its intersections, then merges it. Use Split to split it into separate contours.
• Outline - Extracts the stroke into a separate path.

Clip and mask control

This control allows users to perform clipping and masking operations. Click on the button to selected one of the available options:

• Create clip path - Use the front-most path as a clipping path and place all other paths inside the clipping group.
• Create clip mask - Use the front-most path as a clipping mask and place all other paths inside the clipping group.
• Draw inside - Use a copy of the front-most path as a clipping path and place the selected paths inside the clipping group.

Contextual controls

Transform controls

These controls appear in the Control panel only when the Selection tool is active.

Use the button to center the anchor point on the selected objects. Click and hold the button to open a dropdown that allows you to move the anchor point to corners, sides, and center.

Use the or buttons to flip the selected objects horizontally or vertically using the anchor point as a pivot.

The or buttons are used to rotate the selected objects 90° counter-clockwise or clockwise using the anchor point as a pivot.

Node controls

These controls appear in the Control panel only when the Node tool is active.

For controlling the joints between two path segments you have the following options:

• Straight - Remove control points.
• Disconnected - Control points can be moved independently.
• Mirrored - Control points maintain the 180° angle between them and the distance to the node.
• Asymmetric - Control points maintain the 180° angle between them, but the distance to the node may differ.

Select a path and click the button to reverse its direction. Use the button to change the starting point of a closed path.

Application controls

The following application controls are available and displayed on the left side of the application bar:

• Menu - Open the application menu
• Open - Open a new project
• Save - Save the current project
• Undo - Undo the last action
• Redo - Redo the last action

Canvas area

The canvas is your creative playground, the space where you create and view your vector graphics and animations. It holds everything, including the artboard, layers, guides, and all objects, even those not part of the final output. You can zoom, pan, and freely move around the canvas to navigate large or complex projects, providing you unlimited space to explore, iterate, and organize your vector graphics.

Rulers

Rulers appear along the top and left edges of the canvas, but are not part of the canvas itself. They are always aligned to the canvas coordinate system, helping you measure and align objects within the canvas space. You can also drag out guides from the rulers, which then show up on the canvas to help align design elements precisely. So while rulers are not part of the canvas like shapes or guides are, they are part of the overall canvas interface and interact directly with the objects you place on it.

Properties panel

The Properties panel is the section on the right-hand side of the interface that displays contextual settings and options for the selected objects. It's one of the most frequently used panels because it allows you to precisely control how your design elements look and behave. Depending on the objects you have selected, it dynamically shows different controls grouped logically into sections like Paint, Stroke, Transform, etc. These sections can be collapsed or expanded at will, providing a great user experience even on smaller screens.

Timeline panel

The Timeline panel is a central part of Expressive Animator, the place where you animate properties with keyframes and control when elements apper, move or transform. It is highly intuitive and contains controls for playing, pausing, or changing the speed of animation, as well as options for setting the easing function between two keyframes. The time ruler adjusts automatically and changes its markings depending on the zoom level. It also allows you to move the playhead to a click point or to select a specific time range as a work area for previewing or rendering.

Toolbar

The Toolbar is the vertical panel on the left side of the interface that contains the tools you use to create, edit, and manipulate objects in your animation. It's one of the core components of Expressive Animator's workspace and offers quick access to essential features for drawing, selecting, transforming, and modifying artwork.

Panel controls

The following controlls are available:

• - Show or hide the Settings panel.
• - Show or hide the Layer panel.
• - Collapse the Timeline panel. When the panel is collapsed, the icon changes to and clicking on the control expands the panel.

Layer panel

The Layer panel provides users with a convenient and intuitive way to manipulate and control graphic objects. You can use the layer panel to search inside the document's tree, move and reorder graphics nodes, or lock and hide them.

Settings panel

The Settings panel is the place where you can make modifications to your project. You can change the frame size, the project name, the animation's duration, and framerate, and you can also modify the guide's behavior.

Application menu

The application menu serves as the main gateway to core functions related to file management, editing, exporting and settings.

The following options are provided:

• New project - Create a new project
• New window - Open a new instance of Expressive Animator
• Open - Open an existing project
• Save - Save changes made to the current project
• Save as - Save a copy of the current project in a new file
• Import - Import assets into the current project
• Export - Export current project
• Theme - Change current theme
• Software activation - Open the software activation dialog
• About - Open the About dialog