Rendley SDK

Appearance

Animation Controller ​

Every clip exposes an AnimationController through clip.animationController. It groups keyframes into three time zones on the clip: an In animation that plays at the start, an Out animation that plays at the end, and a Loop animation that cycles between them.

The Animation Controller runs side by side with the Keyframe Animation system. Use the controller when you want entrance, exit, and looping phases with fixed durations that fit the clip; use the keyframe animator when you want full control over keyframes, bezier handles, and effect or filter parameters.

Animation keyframe times are normalized to fit the configured animation duration. For example, if an animation has keyframes at 0s and 10s, but its duration is set to 2s, the second keyframe will play at 2s.

Animation Data ​

Each In/Out/Loop zone is defined by an AnimationData object:

  • name: Identifier used for display and debugging.
  • speed: Playback speed multiplier (2 for faster, 0.5 for slower).
  • offset: Shift in seconds applied to the animation's internal timeline.
  • amplification: Multiplier for relative keyframe values.
  • inOutOfRange / outOutOfRange: What the SDK does when the current time is before the first keyframe or after the last. See OutOfRangeEnum.
  • propertyAnimations: Array of per-property keyframe lists.

Keyframes ​

A Keyframe is a (time, value) pair plus optional easing and a keyframe space:

  • time: Time in seconds (shifted by AnimationData.offset).
  • value: Either a number (interpolated) or a string (set as-is, for text properties).
  • easing: One of EasingEnum, applied on the segment between this keyframe and the next.
  • space: How the keyframe's value is interpreted. See Spaces below.
  • relativeProperty: Optional base property name for relative modes. Defaults to the same property.

Spaces ​

AnimationSpaceEnum controls how the keyframe's value combines with the clip's current property value:

SpaceFormulaUse Case
ABSOLUTEvalueSnap to an exact value.
RELATIVE_ADDITIVEcurrentValue + valueOffset from wherever the clip currently sits. Great for slide-in from off-screen.
RELATIVE_MULTIPLICATIVEcurrentValue * valueScale proportional to current. 0 is invisible, 1 is natural size.
PERCENTAGEcurrentValue * value / 100Same as multiplicative but in percent.
ADDITIVE_MULTIPLICATIVE_TO_RELATIVEpropValue + relativeValue * valueAdvanced: combine the animated property with another. Useful for crop-offset compensation.

Basic Example ​

typescript
import {
  AnimationTypeEnum,
  AnimationSpaceEnum,
  EasingEnum,
} from "@rendley/sdk";

clip.animationController.setAnimation(AnimationTypeEnum.IN, {
  name: "Slide + Fade",
  propertyAnimations: [
    {
      property: "positionX",
      keyframes: [
        {
          time: 0,
          value: -1920,
          easing: EasingEnum.CubicOut,
          space: AnimationSpaceEnum.RELATIVE_ADDITIVE,
        },
        {
          time: 1,
          value: 0,
          space: AnimationSpaceEnum.RELATIVE_ADDITIVE,
        },
      ],
    },
    {
      property: "alpha",
      keyframes: [
        {
          time: 0,
          value: 0,
          easing: EasingEnum.QuadraticOut,
          space: AnimationSpaceEnum.ABSOLUTE,
        },
        { time: 1, value: 1, space: AnimationSpaceEnum.ABSOLUTE },
      ],
    },
  ],
});

clip.animationController.setAnimationDuration(AnimationTypeEnum.IN, 0.8);

Controls ​

typescript
// Apply a new animation
clip.animationController.setAnimation(type, animationData);

// Load from JSON over the network
await clip.animationController.loadAnimation(type, url);

// Override the computed duration
clip.animationController.setAnimationDuration(type, seconds);

// Remove a specific zone
clip.animationController.removeAnimation(type);

// Loop-specific: how many times the Loop animation cycles
clip.animationController.setLoopCount(count);

Where type is AnimationTypeEnum.IN, AnimationTypeEnum.OUT, or AnimationTypeEnum.LOOP.

Prioritization ​

If all three zones (In, Out, Loop) cannot fit within the clip's visible duration, the controller prioritizes In first, then Out, then Loop. The Loop zone's time range is computed automatically to fill whatever is left between In and Out.

See Also ​