Docs - Chillin

Prop	Type	Required	Example	Value Range	Description
type	string	true	-	expression \| procedural \| sequence \| path	The type of animation.
enabled	boolean	false	-	-	Whether the animation is active.
target	string	true	-	-	The property path to animate (e.g., "x", "rotation", "scaleX").
startTime	number	false	-	-	Start time of the animation relative to element start, in seconds.
duration	number	false	-	-	Duration of the animation in seconds. For looping animations, this is the loop period.
loop	boolean	false	-	-	Whether the animation loops.
blendMode	string	false	-	replace \| add \| multiply	How this animation combines with others: replace (override), add (sum), multiply (scale).
blendWeight	number	false	-	-	The strength/influence of this animation (0-1). Used for blending multiple animations.

Expression Animations

Expressions are JavaScript code evaluated per frame, with access to animation context variables.

Available Context Variables

{
  time: number; // Current absolute time (seconds)
  localTime: number; // Time relative to element start
  duration: number; // Element duration
  progress: number; // Normalized progress (0-1)
  index: number; // Element index in group
  total: number; // Total elements in group
  fps: number; // Frames per second
  width: number; // Canvas width
  height: number; // Canvas height
  value: any; // Current property value
}

Expression Example

Bounce animation using Math functions:

expressionAnimation.json

{
"id": "element-1",
"type": "Image",
"start": 0,
"duration": 5,
"animations": [
  {
    "type": "expression",
    "target": "y",
    "enabled": true,
    "expression": "100 + Math.abs(Math.sin(localTime * 3)) * 200",
    "startTime": 0,
    "duration": 5,
    "loop": true
  }
]
}

Complex Expression

Combine multiple effects:

complexExpression.json

{
"animations": [
  {
    "type": "expression",
    "target": "rotation",
    "expression": "(localTime * 2 * Math.PI / duration) + Math.sin(localTime * 4) * 0.1",
    "loop": true
  },
  {
    "type": "expression",
    "target": "scaleX",
    "expression": "1 + Math.sin(localTime * 5) * 0.2",
    "loop": true
  }
]
}

Procedural Animations

Built-in animation patterns with configurable parameters.

Procedural Types

wiggle: Random oscillation (useful for handheld camera effects)
wave: Sine/cosine wave motion
bounce: Elastic bounce effect
pulse: Rhythmic scaling

Wiggle Example

wiggleAnimation.json

{
"animations": [
  {
    "type": "procedural",
    "proceduralType": "wiggle",
    "target": "rotation",
    "enabled": true,
    "frequency": 2,
    "amplitude": 0.1,
    "loop": true
  }
]
}

Sequence Animations

Step-based animations that change values at specific intervals.

Prop	Type	Required	Example	Value Range	Description
values	array	true	-	-	Array of values to step through.
stepDuration	number	true	-	-	Duration of each step in seconds.
loop	boolean	false	-	-	Whether to loop the sequence.

Sequence Example

Text cycling through different sizes:

sequenceAnimation.json

{
"animations": [
  {
    "type": "sequence",
    "target": "fontSize",
    "enabled": true,
    "values": [24, 32, 40, 32, 24],
    "stepDuration": 0.5,
    "loop": true
  }
]
}

Path Animations

Animate elements along Bezier curve paths.

Prop	Type	Required	Example	Value Range	Description
path	string \| array	true	-	-	SVG path data (d attribute) or array of path points.
autoRotate	boolean	false	-	-	Whether to automatically rotate element to follow path tangent.
duration	number	true	-	-	Time to complete the full path.

Path Example

Circular motion:

pathAnimation.json

{
"animations": [
  {
    "type": "path",
    "target": "position",
    "enabled": true,
    "path": "M 100,100 a 200,200 0 1,1 0,1 Z",
    "autoRotate": true,
    "duration": 4,
    "loop": true
  }
]
}

Property Path Syntax

The target property uses dot notation to specify nested properties:

Simple: "x", "y", "rotation"
Nested: "scale.x", "position.y"
Array: "colors[0]", "points[2].x"

Target Resolution Examples

{
  "target": "x"              // Element's x position
  "target": "scaleX"         // Horizontal scale
  "target": "alpha"          // Opacity
  "target": "fill.color"     // Fill color (if fill is object)
  "target": "points[0].x"    // First point's x coordinate
}

Blend Modes

Control how animations combine when multiple target the same property:

Replace (Default)

{
  "blendMode": "replace",
  "blendWeight": 1.0
}

Completely replaces the property value.

Add

{
  "blendMode": "add",
  "blendWeight": 0.5
}

Adds to the existing value (weighted). Useful for accumulating offsets.

Multiply

{
  "blendMode": "multiply",
  "blendWeight": 1.0
}

Multiplies the existing value. Useful for scaling effects.

Multiple Animations Example

Combining different animation types:

multipleAnimations.json

{
"id": "animated-element",
"type": "Shape",
"animations": [
  {
    "type": "expression",
    "target": "x",
    "expression": "width / 2 + Math.sin(localTime * 2) * 300",
    "blendMode": "replace",
    "loop": true
  },
  {
    "type": "procedural",
    "proceduralType": "wiggle",
    "target": "rotation",
    "frequency": 3,
    "amplitude": 0.2,
    "blendMode": "add",
    "blendWeight": 0.5
  },
  {
    "type": "sequence",
    "target": "alpha",
    "values": [1, 0.8, 1],
    "stepDuration": 0.3,
    "loop": true,
    "blendMode": "multiply"
  }
],
"keyframes": [
  {
    "id": "kf-1",
    "time": 0,
    "stateObj": { "scaleX": 1 }
  },
  {
    "id": "kf-2",
    "time": 2,
    "stateObj": { "scaleX": 1.5 }
  }
]
}

In this example:

Expression controls horizontal position (replace mode)
Procedural wiggle adds subtle rotation variation
Sequence pulses opacity
Keyframe scales the element (lowest priority)

Important Notes

Expression Sandbox

Expressions run in a restricted context for security
Access to animation context variables only
Cannot access DOM, external libraries, or Node.js APIs
Evaluation errors will disable the animation

Performance

Expressions: Evaluated every frame - keep them simple
Procedural: Optimized built-in functions - very efficient
Sequence: Minimal overhead, good for discrete changes
Path: Moderate cost, depends on path complexity

Timing

startTime and duration are relative to element's start time
localTime in expressions starts at 0 when the element begins
Animations respect element's overall duration boundary

Debugging

If an animation doesn't work, check:
- enabled: true
- target property exists on the element
- Expression syntax is valid JavaScript
- startTime is within element's duration
- No property path typos

Common Use Cases

Smooth Following Effect

{
  "type": "expression",
  "target": "x",
  "expression": "value + (targetX - value) * 0.1"
}

Elastic Bounce

{
  "type": "expression",
  "target": "scaleY",
  "expression": "1 + Math.exp(-localTime * 3) * Math.cos(localTime * 8) * 0.5"
}

Camera Shake

{
  "type": "procedural",
  "proceduralType": "wiggle",
  "target": "x",
  "frequency": 10,
  "amplitude": 5
}

Staggered Animation (in groups)

{
  "type": "expression",
  "target": "alpha",
  "expression": "Math.max(0, Math.min(1, (localTime - index * 0.1) * 2))"
}