Makes one node mirror another's live property values, optionally remapped — the way to link objects so they move together without parenting them.
Declarative element:
<sk-follow-constraint>
Not on the sk.* global — construct via the declarative element or a module import.
This is the property-following member of the Constraint family: like every
constraint it drives its
constrained target by recomputing from live scene state each frame — here that
state is another SkenraAnimatable's current property values, so the
target keeps tracking the source even as the source animates. The link crosses
types freely: a light's intensity can drive a node's scale.
Key attributes. source names the animatable to read, by #id. Two ways to
choose what to copy: properties follows same-named properties one-to-one
(source.x → target.x), while mappings follows one property onto a
different one with an optional value transform — a source property, a
target property, and a remap of the value between them. Use properties to
lock nodes together and mappings to translate between different quantities. As
with all constraints, priority and composite govern how it stacks with other
effects on the same property.
Related. Other members of the Constraint family drive
position/orientation (sk-align-to-spline-constraint,
sk-target-at-constraint, sk-orbit-constraint);
sk-field-constraint writes a field's sampled weight instead of
another animatable's property; the GPU-parallel PointConstraint
applies per-clone effects across a Cloner.
constructor(config?: { source?: SkenraAnimatable | string; properties?: string[]; mappings?: PropertyMapping[]; id?: string; priority?: number; composite?: CompositeOperation })Inherited from: Constraint, SkenraAnimatable
— see those pages for inherited members.
| Property | Type | Default | Description | Declared by |
|---|---|---|---|---|
sourceanimatable |
SkenraAnimatable | string |
— | Gets the source Animatable whose properties are being followed, | FollowConstraint |
properties |
string[] |
— | Gets the list of simple property names being followed on the | FollowConstraint |
mappings |
PropertyMapping[] |
— | Gets the list of property mappings being followed. | FollowConstraint |
idconfig-only |
string |
— | Optional unique identifier for the constraint. | FollowConstraintConfig |
priority |
number |
— | Gets the priority for this modifier in the effect stack. | Constraint |
compositeconfig-only |
CompositeOperation |
— | Composite operation for this constraint. | FollowConstraintConfig |
| Property | Type | Default | Description | Declared by |
|---|---|---|---|---|
targetread-only |
SkenraAnimatable | null |
— | The node this constraint modifies. | Constraint |
sceneread-only |
any |
— | Gets the Scene this animatable belongs to, if any. | SkenraAnimatable |
animationsread-only |
SkenraAnimation[] |
— | Public getter for the animations affecting this target. | SkenraAnimatable |
| Method | Description | Declared by |
|---|---|---|
animate(firstArg: TypedKeyframe<this>[] | TypedPropertyIndexedKeyframes<this> | Record<string, any> | globalThis.Keyframe[] | globalThis.PropertyIndexedKeyframes | null, secondArg?: number | KeyframeAnimationOptions | globalThis.KeyframeAnimationOptions): SkenraAnimation & Animation |
Creates a new SkenraAnimation for this target per Web Animations API. | SkenraAnimatable |
removeAnimation(animation: SkenraAnimation): boolean |
Removes a specific animation from this object. | SkenraAnimatable |
constrain(type: K, config: ConstraintConfigMap[K]): ConstraintReturnMap[K] |
Creates a constraint on this Animatable using a fluent API. | SkenraAnimatable |
// Copy the leader's x one-to-one, and map its opacity onto the follower's scale.
const fc = new FollowConstraint({
source: leader,
properties: ['x'],
mappings: [{ source: 'opacity', target: 's', map: (v) => 0.2 + 0.8 * v }],
});
fc.setTarget(follower);