Motion
Animation is data on the clip. Every animated property is a channel with keys, and every key has an id, a frame, a value and an easing. New in 1.0.
Keyframes
Keyframes can be set on x, y, scale, scaleX, scaleY, rotation, skewX, skewY, rotateX, rotateY, opacity, volume and cornerRadius, and on effect parameters (fx.*), generator parameters, masks and draw-on. Frames are integers relative to the clip's start, so moving a clip moves its keys, and trim, speed and split remap them.
engine.updateClip(title.id, trackId, {
keyframes: {
channels: {
x: {
source: { kind: 'keyframes' },
keys: [
{ id: 'k0', frame: 0, value: 0.2, easing: 'linear' },
{ id: 'k1', frame: 30, value: 0.8, easing: 'back-out' }, // the curve INTO this key
],
},
},
},
})Easing and springs
A key's easing is one of TEXT_ANIMATION_EASINGS: sine, quad, cubic, quart, quint, expo, circ, back, elastic and bounce, each in, out and in-out, plus linear. A key can instead carry a raw easingBezier (any cubic-bezier), steps, hold, or a closed-form spring from SPRING_PRESETS (gentle, snappy, bouncy, stiff, wobbly).
Expressions
setChannelExpression drives a channel from an expression such as wiggle, loop or sin.
Stagger, repeat and yoyo
staggerOffsets offsets keys from the start, end, centre or edges, at random, or across a grid. repeatKeysPatch writes repeat and yoyo. In HTML scenes and motion presets these are available directly.
Text animators
Text can be animated by character, word or line, each with its own tweens, and scrambleText scrambles text into place.
Motion paths
A clip can travel an SVG path (the motion.progress channel) and orient to it. Path morph and draw-on strokes are keyable too.
3D tilt
rotateX and rotateY give 3D tilt for media and groups: video, image, sequence and compound clips. Text, shapes and freehand clips refuse them.
Editing keys
Keyframes are plain data: every key has an id you can read, write and diff. In the open-source editor you edit them through the API (setKeyframe) or the project JSON. See the motion playground for a keys table and HTML scenes and VideoSpec for writing motion as code.