Class GLTFAnimationPlugin

Manages playback of GLTF animations.

The GLTF animations can be created in any 3d software that supports GLTF export like Blender. If animations from multiple files are loaded, they will be merged in a single root object and played together.

The time playback is managed automatically, but can be controlled manually by setting autoIncrementTime to false and using setTime to set the time.

This plugin is made for playing, pausing, stopping, all the animations at once, while it is possible to play individual animations, it is not recommended.

To play individual animations, with custom choreography, use the GLTFAnimationPlugin.animations property to get reference to the animation clips and actions. Create your own mixers and control the animation playback like in three.js

Hierarchy (view full)

  • AViewerPluginSync<"checkpointEnd" | "checkpointBegin" | "animationStep">
    • GLTFAnimationPlugin



_animationDuration: number = 0
_animationState: "none" | "stopped" | "paused" | "playing" = 'none'
_animationTime: number = 0
_dirty: boolean = false
_dragAnimationState: number = 0
_fadeDisabled: boolean = false
_lastAnimId: string = ''
_lastAnimationTime: number = 0
_lastFrameTime: number = 0
_pageScrollAnimationState: number = 0
_pointerDragHelper: PointerDragHelper = ...
_scrollAnimationState: number = 0
_viewer?: ThreeViewer
_viewerListeners: PartialRecord<"update" | "dispose" | "preRender" | "postRender" | "preFrame" | "postFrame" | "*" | "addPlugin" | "renderEnabled" | "renderDisabled", ((e) => void)> = {}

Type declaration

animateOnDrag: boolean = false

Automatically track drag events in either x or y axes to seek animations Control axis with dragAxis and damping/smoothness with dragAnimationDamping

animateOnPageScroll: boolean = false

Automatically track scroll event in window and use window.scrollY along with pageScrollHeight to seek animations Control damping/smoothness with pageScrollAnimationDamping See also animateOnDrag, animateOnScroll

animateOnScroll: boolean = false

Automatically track mouse wheel events to seek animations Control damping/smoothness with scrollAnimationDamping See also animateOnPageScroll. animateOnDrag

animationSpeed: number = 1

Speed of the animation. (not individual actions) This can be set to 0.

animations: {
    actions: AnimationAction[];
    clips: AnimationClip[];
    duration: number;
    mixer: AnimationMixer;
}[] = []

List of GLTF animations loaded with the models. The animations are standard threejs AnimationClip and their AnimationAction. Each set of actions also has a mixer.

Type declaration

autoIncrementTime: boolean = true

If true, the animation time will be automatically incremented by the time delta, otherwise it has to be set manually between 0 and the animationDuration using setTime. (default: true)

autoplayOnLoad: boolean = false

If true, the animation will be played automatically when the model(any model with animations) is loaded.

constructor: typeof AViewerPluginSync & typeof AViewerPlugin
dragAnimationDamping: number = 0.3

Damping for the drag animation, when animateOnDrag is true.

dragAxis: "x" | "y" = 'y'

Axis to track for drag events, when animateOnDrag is true. x will track horizontal drag, y will track vertical drag.

enabled: boolean = true
loopAnimations: boolean = true

Loop the complete animation. (not individual actions) This happens loopRepetitions times.

loopRepetitions: number = Infinity

Number of times to loop the animation. (not individual actions) Only applicable when loopAnimations is true.

pageScrollAnimationDamping: number = 0.1

Damping for the scroll animation, when animateOnPage Scroll is true.

scrollAnimationDamping: number = 0.1

Damping for the scroll animation, when animateOnScroll is true.

syncMaxDuration: boolean = false

Sync the duration of all clips based on the max duration, helpful for things like timeline markers

timeScale: number = 1

Timescale for the animation. (not individual actions) If set to 0, it will be ignored.

uiConfig: UiObjectConfig<any, string, any>
PluginType: "GLTFAnimation" = 'GLTFAnimation'



  • Starts all the animations and returns a promise that resolves when all animations are done.


    • resetOnEnd: boolean = false

      if true, will reset the animation to the start position when it ends.

    • Optional animations: AnimationAction[]

      play specific animations, otherwise play all animations. Note: the promise returned (if this is set) from this will resolve before time if the animations was ever paused, or converged mode is on in recorder.

    Returns Promise<void>

Generated using TypeDoc