In this article we'll cover the different pieces that make up Animator, what they are for and their names. This will make understanding our learning resources easier.


This is the place where all your projects are listed. By clicking on each project's dotted icon you can access options to duplicate, reveal in Finder and delete the project.


The Library is the place where Animator lists your assets in a Tree View. It includes:

  • Components

  • Design files

  • Slices

  • Art-boards

  • SVGs


This is the place where you drag and drop your design slices to compose and animate them.


With the timeline you can transform your slices in time and space to animate them. Parts of the timeline include:

  • Properties panel: Located at the left side of the timeline. This panel shows the editable properties for a given layer or component.

  • Layers: Listed inside the Properties Panel. Each of the slices you drag and drop onto the stage (action also known as "instantiation") becomes a layer in the timeline. You can reorganize them from top to bottom, you can lock them, add properties to them and more.

  • Properties: Nested inside and applied to each layer. They include options like "Opacity", "Scale", "Position", which are all editable and allow you to modify your layers/slices. You can add more Properties with the [Add] button.

  • Controls: Located at the bottom of the timeline. You can play, pause, jump to beginning/end and activate/deactivate playback.

  • Playhead or ticker: White vertical line with a round head. It indicates the current time of the animation. If you manually move or scrub it you will be able to play the animation frame by frame. Whenever you move the playhead and change a property's value, a new keyframe will be created at that exact moment in time.

  • Gauge: Placed at the top of the timeline. It marks the frames or milliseconds of your animation, which you can select using the toggle located next to it. If you click at any point in time in the lower part of the gauge, the playhead will jump to that spot. If you click on the upper part of the gauge, you will create a "Frame Action".

  • Keyframe: They mark different states of your slices in time and space.

  • Tweens: They are transitions implemented between keyframes to create the illusion of smooth motion.


States are buckets of data, or variables, which you can use in several ways in Animator. Read more here.

Main and components

Main, as its name suggests, is the main or primary stage of your project. Besides Main, you can create components (or "sub-components"), each with its own stage, states and timeline. These components can, at the same time, be instantiated in Main or in other components. 

Components will also appear listed in the Library, and if instantiated, they will appear in the timeline's Properties Panel as well.

You can toggle between Main and your components via the tab-bar placed above the stage. The active or selected component is marked in light-grey. You can also use the [+] button to create a new component.


Design mode vs Code mode

In Design mode you can view the Stage, which could be considered the visual representation of your project. In Code mode you can view Animator's code editor, which is the code-based representation of your project. You can edit your project with any of the two modes interchangeably! 

Preview mode

Like its name suggests, Preview Mode allows you to pause Edit mode and preview your animation to check how everything is looking before publishing your project and integrating it into your codebase.


When you publish your project you can share it with others and get instructions on how to integrate it into your codebase.

Did this answer your question?