Animation — SXL Studio Docs

The Animation group describes motion and animation parameters: duration, easing curves, and composite transitions.

Important: animation tokens have no visual representation in Figma. They are designed for code export so that designers and developers share a unified motion system.

Duration

Animation or transition duration.

CSS: transition-duration, animation-duration.

JSON
{
  "duration": {
    "$type": "duration",
    "instant": { "$value": "0ms" },
    "fast": { "$value": "100ms" },
    "normal": { "$value": "200ms" },
    "slow": { "$value": "300ms" },
    "slower": { "$value": "500ms" },
    "slowest": { "$value": "1000ms" }
  }
}

Accepted formats:

Format	Example
Milliseconds	`"200ms"`
Seconds	`"0.2s"`
Number	`200` (interpreted as ms)

Tip: standard UI durations — 100–300ms for micro-interactions, 300–500ms for screen transitions. Over 500ms feels sluggish.

Cubic Bezier

An easing curve function. Defines the motion character: smooth start, sharp stop, elastic bounce.

CSS: cubic-bezier(x1, y1, x2, y2).

Format — array of 4 numbers:

JSON
{
  "cubicBezier": {
    "$type": "cubicBezier",
    "ease": { "$value": [0.25, 0.1, 0.25, 1.0] },
    "ease-in": { "$value": [0.42, 0, 1.0, 1.0] },
    "ease-out": { "$value": [0, 0, 0.58, 1.0] },
    "ease-in-out": { "$value": [0.42, 0, 0.58, 1.0] },
    "spring": { "$value": [0.175, 0.885, 0.32, 1.275] }
  }
}

What the numbers mean:

cubic-bezier(x1, y1, x2, y2)
               │   │   │   │
               │   │   │   └── y2: end point (speed at end)
               │   │   └────── x2: end control point (time)
               │   └────────── y1: start point (speed at start)
               └────────────── x1: start control point (time)

Standard curves:

Name	Value	Description
`linear`	`[0, 0, 1, 1]`	Uniform motion
`ease`	`[0.25, 0.1, 0.25, 1.0]`	Standard CSS curve
`ease-in`	`[0.42, 0, 1.0, 1.0]`	Slow start
`ease-out`	`[0, 0, 0.58, 1.0]`	Slow end
`ease-in-out`	`[0.42, 0, 0.58, 1.0]`	Slow start and end

String format:

JSON
{ "$value": "cubic-bezier(0.4, 0, 0.2, 1)", "$type": "cubicBezier" }

Transition

A composite transition combining duration, delay, easing curve, and property. A complete animation description for a specific CSS property.

CSS: transition.

JSON
{
  "transition": {
    "default": {
      "$value": {
        "duration": "200ms",
        "delay": "0ms",
        "timingFunction": [0.4, 0, 0.2, 1],
        "property": "all"
      },
      "$type": "transition"
    }
  }
}

Object properties:

Property	Type	Description
`duration`	string / number	Transition duration
`delay`	string / number	Delay before start
`timingFunction`	array / string	Easing curve (cubic-bezier)
`property`	string	CSS property (`all`, `opacity`, `transform`, etc.)

Aliases to other tokens:

JSON
{
  "transition": {
    "fade": {
      "$value": {
        "duration": "{duration.normal}",
        "delay": "0ms",
        "timingFunction": "{cubicBezier.ease-out}",
        "property": "opacity"
      },
      "$type": "transition"
    }
  }
}

String shorthand:

JSON
{
  "transition": {
    "quick": {
      "$value": "all 200ms cubic-bezier(0.4, 0, 0.2, 1)",
      "$type": "transition"
    }
  }
}

Full example: motion system

JSON
{
  "duration": {
    "$type": "duration",
    "instant": { "$value": "0ms" },
    "fast": { "$value": "100ms" },
    "normal": { "$value": "200ms" },
    "slow": { "$value": "300ms" },
    "slower": { "$value": "500ms" }
  },
  "cubicBezier": {
    "$type": "cubicBezier",
    "linear": { "$value": [0, 0, 1, 1] },
    "ease-in": { "$value": [0.42, 0, 1, 1] },
    "ease-out": { "$value": [0, 0, 0.58, 1] },
    "ease-in-out": { "$value": [0.42, 0, 0.58, 1] },
    "emphasized": { "$value": [0.2, 0, 0, 1] },
    "spring": { "$value": [0.175, 0.885, 0.32, 1.275] }
  },
  "transition": {
    "default": {
      "$value": {
        "duration": "{duration.normal}",
        "delay": "0ms",
        "timingFunction": "{cubicBezier.ease-in-out}",
        "property": "all"
      },
      "$type": "transition"
    },
    "fade": {
      "$value": {
        "duration": "{duration.fast}",
        "delay": "0ms",
        "timingFunction": "{cubicBezier.ease-out}",
        "property": "opacity"
      },
      "$type": "transition"
    },
    "scale": {
      "$value": {
        "duration": "{duration.normal}",
        "delay": "0ms",
        "timingFunction": "{cubicBezier.spring}",
        "property": "transform"
      },
      "$type": "transition"
    }
  }
}

Copy this file — you'll have a complete motion system that developers can use in CSS/Swift/Kotlin.

#Duration

#Cubic Bezier

#Transition

#Full example: motion system

#Related pages

Duration

Cubic Bezier

Transition

Full example: motion system

Related pages