Understanding Tweens

Tweens are time-based value changes attached to cues. Every visual and audio property of a cue that can change over time — position, scale, opacity, color, crop, rotation, blur, volume, and more — is driven by a tween. A tween defines a curve of values across the duration of a cue, controlling exactly how a property transitions from one state to another. Whether you are fading content in, sliding it across Stage, applying a color shift, or animating a crop reveal, the underlying mechanism is always a tween.

WATCHOUT provides over 40 tween types organized into logical groups. Some tweens control a single value (such as Opacity or Brightness), while others involve multiple coordinated channels (such as Position, which has X, Y, and Z axes, or Corners, which has eight channels for the four corner points). Every tween type has its own default value, permitted range, and unit, and these are enforced in the editor to keep values within meaningful bounds.

How Tweens Work

A tween is a sequence of tween points (keyframes) spread across the duration of a cue. Each tween point defines a specific value at a specific time. Between tween points, WATCHOUT interpolates smoothly according to the selected transition type (easing curve), producing continuous animation from one value to the next.

The simplest tween has two points: a start value and an end value. For example, an Opacity tween might start at 0% at the beginning of a cue and reach 100% halfway through, producing a fade-in over the first half of the cue's duration. More complex animations use additional tween points to create multi-stage transitions — a value that rises, holds, then falls, or that follows a specific rhythm synchronized to other show elements.

Keyframe Interpolation
Opacity preview 0%
0.0s
Easing for selected segment:
Drag keyframe diamonds to reposition · Click curve area to add a point · Right-click a point to delete it

Every tween point has three core properties:

  • Time from Start of Cue — when this point occurs, measured from the beginning of the cue.
  • Value — the property value at this moment. The label, unit, and permitted range depend on the tween type (for example, "Percentage" for crop tweens, "Position X / Y / Z" for position tweens, or "X Value / Y Value" for scale tweens).
  • Transition Type — the easing curve used to interpolate from the previous point to this one.

Tween Groups

Tweens are organized into groups in the tween area beneath each cue. These groups correspond to functional categories and match the submenus in the Effect menu:

GroupTweens Included
TransformPosition, Scale, Rotation X, Rotation Y, Rotation Z
GeneralOpacity, Gaussian Blur, Volume
CropCrop Top, Crop Bottom, Crop Left, Crop Right
ColorBrightness, Contrast, Exposure, Temperature, Gamma, Hue, Saturation, Invert, Red Gain, Green Gain, Blue Gain, Red Offset, Green Offset, Blue Offset
CornersCorner Top Left X/Y, Corner Top Right X/Y, Corner Bottom Left X/Y, Corner Bottom Right X/Y
Linear WipeAngle, Location, Feather, Completion
ArtNetArtNet fixture channels (when ArtNet tweens are present)

You can expand or collapse tween groups using the Show Tweens / Hide Tweens controls in the tween group header.

The Effect View

When a cue with effects is selected, the Effect View appears beneath the cue in the Timeline window. It uses a two-panel layout:

Left panel — Effect list. A collapsible list of all effects applied to the cue. Each row shows:

ElementPurpose
Color swatchThe display color of the effect curve (customizable via Edit Menu > Tween Colors)
Enable checkboxToggles whether the effect is active in rendering — unchecked effects are skipped during playback
Eye / mute iconControls visibility of the effect curve in the right panel — click to hide a curve and reduce visual clutter
Name and valueThe effect name and its current value at the playhead position

You can solo a tween by Shift-clicking its eye icon. This hides all other effect curves in the right panel, isolating the selected curve for focused editing. Shift-click the eye icon again to restore all curves.

Right panel — Curve area. Displays the tween curves and their keyframe points. This is where you visually create and edit animation:

  • Single-click on a curve to add a new tween point at that position.
  • Drag a point to move it in time (horizontal) or value (vertical).
  • Draw a selection rectangle by clicking and dragging on an empty area to select multiple points at once.
  • Multi-select points (via selection rectangle, or Ctrl+click) to move many points simultaneously — useful for shifting an entire section of animation in time or value.

Adding Tweens to a Cue

To add a tween to a cue:

  1. Select one or more cues in the Timeline.
  2. Open the Effect menu and click the desired tween type. The menu items act as toggles — clicking a tween type adds it if not already present, or removes it if it is.
  3. The tween appears in the tween area beneath the cue, within its corresponding group.

Many tween types have keyboard shortcuts for quick access:

ShortcutTween
Alt+PPosition
Alt+SScale
Alt+XRotation X
Alt+YRotation Y
Alt+ZRotation Z
Alt+OOpacity
Alt+BGaussian Blur
Alt+VVolume
Alt+CCrop (all four sides)
Alt+NCorners (all eight channels)

Some tweens are added as a complete group. For example, selecting Corners from the Effect menu adds all eight corner channels at once, and selecting Linear Wipe adds all four wipe channels together. Individual crop sides can also be added separately through the Effect > Crop submenu, or all four at once with Alt+C.

Editing Tween Points

Once a tween is added, you work with it by adding, moving, and adjusting tween points:

  • Adding a point — place the time needle at the desired moment and add a tween point using the context menu or by double-clicking on the tween curve in the tween area.
  • Selecting a point — click a tween point to select it. Its properties appear in the Properties panel.
  • Adjusting the value — edit the value directly in the Properties panel. For position tweens, you also see Position X, Position Y, and Position Z fields. For scale tweens, you see X Value and Y Value along with their computed X Pixel Value and Y Pixel Value.
  • Moving in time — drag a tween point horizontally in the tween area, or edit the Time from Start of Cue field in the Properties panel.

Transition Types (Easing Curves)

The Transition Type property on each tween point controls how the value interpolates from the previous point to the current one. WATCHOUT provides 31 easing curves organized into 11 families:

FamilyVariantsCharacter
LinearLinearConstant speed, no acceleration or deceleration
QuadraticIn, Out, InOutGentle acceleration/deceleration
CubicIn, Out, InOutModerate acceleration/deceleration
QuarticIn, Out, InOutStrong acceleration/deceleration
QuinticIn, Out, InOutVery strong acceleration/deceleration
SinusoidalIn, Out, InOutSmooth, sine-wave-based easing
ExponentialIn, Out, InOutDramatic speed changes
CircularIn, Out, InOutQuarter-circle acceleration profile
BounceIn, Out, InOutSimulates a bouncing motion at start/end
ElasticIn, Out, InOutOvershoots and springs back, like a rubber band
BackIn, Out, InOutPulls back slightly before moving forward (or overshoots at the end)

Each family (except Linear) has three variants:

  • In — the effect is applied at the start of the transition (slow start, fast end).
  • Out — the effect is applied at the end of the transition (fast start, slow end).
  • InOut — the effect is applied at both ends (slow start, slow end, fast middle).

The default transition type is Linear, which produces constant-speed interpolation. For natural-looking motion, Quadratic InOut or Cubic InOut are common choices. For attention-grabbing effects, Bounce Out or Elastic Out add playful character.

Choose easing curves that match the emotional tone of the moment. Gentle curves like Sinusoidal InOut suit elegant transitions. Snappy curves like Cubic In suit energetic reveals. Keep easing consistent within a scene for a cohesive feel.

Tween Value Reference

Every tween type has a defined range, default value, and unit. Some tweens enforce hard limits (you cannot enter values outside the range), while others allow values beyond the listed range for creative flexibility. Position, Rotation, Hue, and Corner tweens all accept values outside their default display range.

TweenRangeDefaultUnitNotes
Positionunlimited0Stage coordinates (X, Y, Z)
Scale (X / Y)0–100+100%100% = original size, values above 100 are permitted
Rotation Zunlimited0degrees2D spin (roll)
Rotation Yunlimited0degreesHorizontal 3D turn (yaw)
Rotation Xunlimited0degreesVertical 3D tilt (pitch)
TweenRangeDefaultUnitNotes
Opacity0–100100%100% = fully visible
Gaussian Blur0.5–640.50.5 = no visible blur
Volume0–100100%100% = full volume
TweenRangeDefaultUnitNotes
Crop Top / Bottom / Left / Right0–1000%0% = no crop
TweenRangeDefaultUnitNotes
Brightness-100 to 1000%0 = unchanged
Contrast-100 to 1000%0 = unchanged
Exposure-20 to 200EV0 = unchanged
Temperature-100 to 1000%0 = unchanged
Gamma0.01–10.01.01.0 = unchanged
Hueunlimited0degrees0 = unchanged
Saturation0–100100%100% = full color
Invert0–1000%0 = normal, 100 = fully inverted
Red / Green / Blue Gain0–100100%100% = unchanged
Red / Green / Blue Offset-100 to 1000%0 = unchanged
TweenRangeDefaultUnitNotes
Corner (all 8 channels)unlimited100100 = natural corner position
TweenRangeDefaultUnitNotes
Wipe Angleunlimited0degreesEdge direction
Wipe Location0–100100%Edge position
Wipe Feather0–1000%Edge softness
Wipe Completion0–1000%0 = hidden, 100 = visible

Tween Expressions

Any tween can optionally be driven by a mathematical expression instead of (or in addition to) its keyframe points. When an expression is set, the tween value is computed dynamically at playback time based on variables, time functions, ArtNet input, or other parameters.

For single-value tweens, the Properties panel shows an Expression field. For multi-axis tweens like Scale, you see X Expression and Y Expression. For Position, you see X Expression, Y Expression, and Z Expression.

Expressions are a powerful tool for interactive shows, data-driven animation, and external control. For full details, see Tween Expressions.

Practical Advice

  • Start simple. A two-point tween (start value and end value) is often all you need. Add intermediate points only when you need the value to change direction or hold at a specific level.
  • Match easing to intent. Use Linear for mechanical or technical motion. Use InOut curves for natural movement. Use Bounce or Elastic sparingly, for moments that benefit from playful emphasis.
  • Keep tween density low. Many closely spaced tween points are hard to edit and rarely produce better results than fewer well-placed points with appropriate easing curves.
  • Preview on target output. The Stage view gives a good approximation, but always verify tween behavior on the actual display hardware, especially for subtle effects like color shifts or blur.
  • Use the Effect menu toggles. Remember that the Effect menu items are toggles — clicking a tween type on a cue that already has it will remove it. This is the quickest way to clean up unused tweens.