Makes one node mirror another's live property values, optionally remapped — the way to link objects so they move together without parenting them.
JavaScript API:
FollowConstraint
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.
Serve these docs to run the live example.
WebGPU needs a secure context — open this page via grunt serve
rather than double-clicking the file. The Markup tab works from disk.
<!-- Two followers read the SAME animated leader. The blue one uses
`properties="x"` to copy x one-to-one (it slides in step). The red one
uses a `mappings` entry to drive a *different* property — the leader's `x`
becomes the follower's `y`, so horizontal motion turns into vertical motion.
That cross-property link is what `mappings` is for. -->
<sk-scene>
<sk-plain-material id="lead-mat" base-color="#e0b040"></sk-plain-material>
<sk-plain-material id="copy-mat" base-color="#4f86c6"></sk-plain-material>
<sk-plain-material id="map-mat" base-color="#d1495b"></sk-plain-material>
<!-- Leader: animates left/right along x. -->
<sk-sphere id="leader" y="2" radius="0.5" segments="6">
<sk-surface-paint material="#lead-mat"></sk-surface-paint>
<sk-animation duration="3000ms" iterations="Infinity" direction="alternate" easing="ease-in-out">
<sk-keyframe offset="0" x="-3"></sk-keyframe>
<sk-keyframe offset="1" x="3"></sk-keyframe>
</sk-animation>
</sk-sphere>
<!-- Same-name copy: slides in step with the leader. -->
<sk-sphere y="0" radius="0.45">
<sk-surface-paint material="#copy-mat"></sk-surface-paint>
<sk-follow-constraint source="#leader" properties="x"></sk-follow-constraint>
</sk-sphere>
<!-- Cross-property map: the leader's x drives THIS node's y. -->
<sk-sphere x="4" radius="0.45">
<sk-surface-paint material="#map-mat"></sk-surface-paint>
<sk-follow-constraint source="#leader" mappings='[{"source":"x","target":"y"}]'></sk-follow-constraint>
</sk-sphere>
</sk-scene>| Attribute | Type | Default | Description |
|---|---|---|---|
sourceanimatable |
<id-ref> |
— | The Animatable whose properties will be followed, as a reference by id |
properties |
<string-list> (<string>[,<string>]*) |
— | Simple same-name properties to follow from the source. |
mappings |
<property-mapping> |
— | Property mappings with optional value transforms. |
priority |
<number> |
— | Priority for effect ordering. |
composite |
<constraint-composite> ("replace" | "add" | "accumulate") |
— | Composite operation for this constraint. |