Join us online - 19th of November
Save your spot

Class MaptilerAnimationMaptiler

Animation controller for keyframe-based animation sequences.

MaptilerAnimation handles interpolation between keyframes, timing control, and event dispatching during animation playback.

const animation = new MaptilerAnimation({
  keyframes: [
    { delta: 0, props: { x: 0, y: 0 } },
    { delta: 0.5, props: { x: 50, y: 20 } },
    { delta: 1, props: { x: 100, y: 0 } }
  ],
  duration: 1000, // milliseconds
  iterations: 2
});

animation.addEventListener("timeupdate", (event) => {
  // Use interpolated property values to update something
  console.log(event.props);
});

animation.play();

The animation supports various playback controls (play, pause, stop, reset), time manipulation, and an event system for tracking animation progress. Properties missing in keyframes will be automatically interpolated.

Animation events include play, pause, stop, timeupdate, iteration, and more.

When not using manualMode, animations are automatically added to the AnimationManager.

Index
constructor
duration
isPlaying
addEventListener clone destroy emitEvent getCurrentAndNextKeyFramesAtDelta getCurrentAndNextKeyFramesAtTime getCurrentDelta getCurrentTime getPlaybackRate pause play removeEventListener reset setCurrentDelta setCurrentTime setPlaybackRate stop update updateInternal
duration: number

The duration of the animation in milliseconds (when playbackRate === 1)

  • get isPlaying(): boolean

    Indicates if the animation is currently playing

    Returns boolean

    • true if the animation is playing, false otherwise

  • Destroys the animation instance, removing all event listeners and stopping playback

    Returns void

  • Emits an event to all listeners of a specific type

    Parameters

    • event: AnimationEventTypes

      The type of event to emit

    • Optionalkeyframe: Keyframe | null

      The keyframe that triggered the event

    • OptionalnextKeyframe: Keyframe | null
    • props: Record<string, number> = {}

      The interpolated properties at the current delta

    • OptionalpreviousProps: Record<string, number>

    Returns void

  • Gets the current and next keyframes at a specific delta value

    Parameters

    • delta: number

      The delta value to query

    Returns { current: InterpolatedKeyFrame | null; next: InterpolatedKeyFrame | null }

    Object containing current and next keyframes, which may be null

  • Gets the current and next keyframes at a specific time

    Parameters

    • time: number

      The time position to query

    Returns { current: InterpolatedKeyFrame | null; next: InterpolatedKeyFrame | null }

    Object containing current and next keyframes, which may be null

  • Gets the current delta value of the animation

    Returns number

    The current delta value (normalized progress between 0 and 1)

  • Gets the current time position of the animation

    Returns number

    The current time in milliseconds

  • Gets the current playback rate

    Returns number

    The current playback rate

  • Resets the animation to its initial state without stopping

    Parameters

    • manual: boolean = true

    Returns MaptilerAnimation

    This animation instance for method chaining

    "reset"

  • Sets the current delta value of the animation

    Parameters

    • delta: number

      The delta value to set (normalized progress between 0 and 1)

    Returns MaptilerAnimation

    This animation instance for method chaining

    Error if delta is greater than 1

    "scrub"

  • Sets the current time position of the animation

    Parameters

    • time: number

      The time to set in milliseconds

    Returns MaptilerAnimation

    This animation instance for method chaining

    Error if time is greater than the duration

    "scrub"

  • Sets the playback rate of the animation

    Parameters

    • rate: number

      The playback rate (1.0 is normal speed)

    Returns MaptilerAnimation

    This animation instance for method chaining

    "playbackratechange"

  • Stops the animation and resets to initial state

    Parameters

    • silent: boolean = false

    Returns MaptilerAnimation

    This animation instance for method chaining

    "stop"

  • Updates the animation state, interpolating between keyframes and emitting events as necessary

    Parameters

    • manual: boolean = true
    • ignoreIteration: boolean = false

    Returns MaptilerAnimation

    This animation instance for method chaining

    "timeupdate"

    "keyframe"

    "iteration"

    "animationend"

  • Updates the animation state if playing, this is used by the AnimationManager to update all animations in the loop

    Returns MaptilerAnimation

    This animation instance for method chaining

Was this helpful?