Stew FactoryStew EngineDocsExamplesStart
Start here

Getting started

Your first clip: one track, two keyframes. Change where it ends and watch the data and the motion change together.

Your first clip

A clip is a duration in seconds and a list of tracks. Each track moves one property of one target, through its keyframes. This one moves a ball along x.

0.0 / 2.0 s
{
  "duration": 2,
  "tracks": [
    {
      "targetUid": "ball",
      "property": "x",
      "keyframes": [
        { "time": 0, "value": 0 },
        { "time": 1.2, "value": 400 }
      ]
    }
  ]
}

Play it

compile reads the clip once. svgDrawer writes each frame on the SVG: its bind function hands back the elements a target is written to, here every element whose data-stew-uid matches. createPlayer ties the two together, and play starts it.

The keyframes have no easing, so the move uses the default, power1.inOut: a gentle start and a gentle stop.

Nothing throws. A track or a keyframe the engine can't read is left out and noted in program.skipped, and the rest still plays.

What you can animate

A track's property is one of these. The pages that follow show each kind.

Move
x, y, rotate, scale, scaleX, scaleY, skewX, skewY: composed into one transform about the target's pivot.
Paint
opacity, fill, stroke, strokeWidth, fillGradient, and the self-draw: draw (0 to 1 of the stroke) and dashOffset.
Shape
cx, cy, r, width, height, and whole outlines: morph and warp.
Travel
motion: how far along a path, 0 to 1. anchor: where the target turns about, keyed.
Effects
blur, shadowX, shadowY, shadowBlur, shadowOpacity, shadowColor, glassRefraction, glassFrost, glassTint, seed.

Reference

StewDoc: the clip
durationnumberrequired
Seconds: one lap. Infinity means it never ends.
tracksStewTrack[]required
What moves.
loopbooleandefault true
Repeat when it ends. Read into program.loop for you; the player itself repeats by its repeat option.
pivotsRecord<string, StewPoint>default 0, 0
Where each target turns, scales and skews about, in the units of the element its transform is written to.
pathsRecord<string, StewPath>optional
The path each target's motion track follows.
boxesRecord<string, StewBox>optional
Each target's own box, for an anchor track.
version1default 1
The format version.
StewTrack: one property of one target
targetUidstringrequired
Which target: your name for it.
propertystringrequired
What it animates: "x", "rotate", "fill"...
keyframesStewKeyframe[]required
Where it is at moments, in any order: the engine sorts them.
cyclenumberoptional
Seconds: the keys start over every cycle seconds, forever, whatever the clip's length.
StewKeyframe: a moment
timenumberrequired
Seconds.
valuenumber | stringrequired
A number, a color, or path data, as the property needs.
easingstringdefault "power1.inOut"
The ease of the stretch leaving this keyframe, toward the next one.
NextTracks and keyframes