Skip to main content
Currently, you can only create the animations that are supported, shown below:
  • Keyframe Animations

​
Keyframe Animations

Keyframe animations have a keypath, duration, settings for repeat, and values.

​
Getting Started

To create a keyframe animation:
  1. Select a layer in your canvas
  2. Open the Animations tab in the Inspector panel (right side)
  3. Toggle Enable animation to ON
  4. Configure your animation settings (see below)
Note: You must be on the Base State to create animations. Animations cannot be created or edited in other states. Note: Animations are not supported for video layers.

​
Animation Settings

​
Key path

Click the Key path dropdown to select what type of animation you want to create for your layer. Available options:
  • position - Both X and Y axis position movement
  • position.x - X axis position movement only
  • position.y - Y axis position movement only
  • transform.rotation.x - X axis rotation
  • transform.rotation.y - Y axis rotation
  • transform.rotation.z - Z axis rotation

​
Duration (s)

Enter a number in the Duration (s) input field to set how long it takes to go from one keyframe (Value) to another. For example, if you set a duration of 1, it will take 1 second to go from your first keyframe to the next.

​
Autoreverse

Toggle the Autoreverse switch to make your keyframe animation reverse after finishing the last keyframe. This means if you have 5 keyframes, it will go from 1 → 2 → 3 → 4 → 5 → 4 → 3 → 2 → 1.

​
Loop Infinitely

Toggle the Loop infinitely switch to control how your animation repeats:
  • When turned ON: Your animation will repeat forever.
  • When turned OFF: An input field Repeat for (s) will appear. Enter the total duration the animation should play before stopping.

​
Values

The Values section is where you create the keyframes for your animation. The input fields shown depend on your selected Key path:
  • For position: You’ll see X and Y input fields for each keyframe
  • For position.x or position.y: You’ll see a single number input for each keyframe
  • For transform.rotation keypaths: You’ll see a Degrees input for each keyframe
To add a keyframe:
  1. Click the + Add key value button
  2. Enter the value(s) for that keyframe in the input field(s)
  3. Repeat to add more keyframes
To remove a keyframe: Click the Remove button next to the keyframe you want to delete. Important: You MUST have at least 2 values to see an animation.

​
Advanced Animation Settings

Expand the Advanced section in the Animations tab to access more control:
  • Calculation Mode:
    • Paced: Smooth, even movement across all keyframes.
    • Discrete: Instant jumps between keyframes (great for blinking or stop-motion).
  • Timing Function: Control the “acceleration” of your animation:
    • Linear: Constant speed.
    • Ease In: Starts slow, then speeds up.
    • Ease Out: Starts fast, then slows down.
    • Ease In/Out: Starts and ends slow.
  • Key Times: (Advanced) Manually specify the percentage of duration (0.0 to 1.0) when each keyframe should be reached.

​
The Timeline

The Timeline at the bottom of the editor provides a visual way to manage your animations.
  • Syncing: Align animations across different layers.
  • Quick Adjust: Click and drag the ends of an animation bar in the timeline to change its Duration without typing numbers.