Class AnimationManager

GoJS® Diagramming Components
version 3.0.8
by Northwoods Software®

AnimationManager handles animations in a Diagram. Each Diagram has one, Diagram.animationManager. Setting the Model, performing a Layout, Group expansion and Tree expansion automatically start animations through the defaultAnimation. Animations can be manually started by creating Animations, which are associated with an AnimationManager.

Animation is enabled by default, setting the isEnabled property to false will turn off animations for a Diagram.

When the defaultAnimation begins it raises the "AnimationStarting" Diagram event, upon completion it raises the "AnimationFinished" Diagram event.

The defaultAnimation, if running, will stop if a new transaction is started, if an undo or redo is called, if a layout is invalidated, or if a model is replaced. When an Animation is stopped, the Diagram immediately finishes the animation and draws the final state. Animations can be stopped programmatically with the methods AnimationManager.stopAnimation or Animation.stop.




  • Gets the set of currently animating Animations being managed by this AnimationManager, including any running defaultAnimation.



  • This read-only property gets the Animation that carries out the default built-in GoJS animations. This animation is usually only referenced to modify default animation properties, such as the Animation.easing or Animation.duration.

    You should not add anything to or start the default animation, GoJS does so automatically, internally. When the default animation begins it raises the "AnimationStarting" Diagram event, upon completion it raises the "AnimationFinished" Diagram event. You should not modify the properties Animation.runCount or Animation.reversible on the default animation.

    See the Introduction Page on Animations for more detail.



  • Gets or sets the default duration, in milliseconds, used as the duration for the defaultAnimation and for animations that have their Animation.duration set to NaN.

    Typically these values are short. The default value is 600 milliseconds. The value must be a number greater than or equal to 1. Setting this property does not raise any events.

  • Gets or sets the initial animation style that is set up by the defaultAnimation. This can be AnimationStyle.Default, AnimationStyle.AnimateLocations, or AnimationStyle.None.

    An example custom initial animation, which zooms the Diagram into view:

    myDiagram.animationManager.initialAnimationStyle = go.AnimationStyle.None;
    myDiagram.addDiagramListener('InitialAnimationStarting', e => {
    const animation = e.subject.defaultAnimation;
    animation.easing = go.Animation.EaseOutExpo;
    animation.duration = 900;
    animation.add(e.diagram, 'scale', 0.1, 1);
    animation.add(e.diagram, 'opacity', 0, 1);


  • This read-only property is true when the animation manager is currently animating any animation, including the defaultAnimation.

    This value cannot be set, but animation can be stopped by calling stopAnimation, and it can be prevented by setting isEnabled.

  • Gets or sets whether this AnimationManager operates.

    The default value is true. Setting this to false does not stop an animation, it only stops future animations. To stop any ongoing animation, use stopAnimation. To disable only the default animations, set canStart to a function that always returns false.

    If any indefinite animations (animations with Animation.runCount set to Infinity) were running when this is set to false, they will be resumed when this is set to true.

    Setting this property does not raise any events.

  • Gets or sets whether a default animation is performed on an initial layout.

    The default value is true. Changing the value does not affect any ongoing animation. Setting this property does not raise any events.

  • This read-only property is true when the animation manager is in the middle of an animation tick. Animation only operates on GraphObjects during ticks, but code outside of AnimationManager's control may execute between ticks.

    isTicking can only be true when isAnimating is also true.


  • This method is passed the reason a default animation is to begin, and must return true or false based on whether or not the animation is to be allowed. Returning true means the animation will occur, returning false will stop the animation's setup.

    By default, this method always returns true. Setting this to a function that always returns false will disable all default animations, but allow other animations, such as AnimationTriggers, to run.

    These are the possible reasons GoJS will begin an animation:

    Called by CommandHandler:

    • "Collapse SubGraph"
    • "Expand SubGraph"
    • "Collapse Tree"
    • "Expand Tree"
    • "Scroll To Part"
    • "Zoom To Fit"

    Called by Diagram:

    • "Model"
    • "Layout"

    Called by AnimationTriggers:

    • "Trigger"

    Example usage:

    // disallow expand/collapse animations, but allow all other default animations:
    myDiagram.animationManager.canStart = function(reason) {
    if (reason === "Expand Tree") return false;
    return true;

    // disallow all default animations:
    myDiagram.animationManager.canStart = function(reason) {
    return false;


    • reason: string

      Reason for starting the animation

    Returns boolean



  • Stops the defaultAnimation and updates the Diagram to its final state.

    If the argument is true, this stops all running animations. If an Animation was about to begin, it will be cancelled.

    If the AnimationManager.defaultAnimation is running, this will raise the "AnimationFinished" Diagram event.


    • Optional stopsAllAnimations: boolean

      Whether to stop all animations, instead of just the defaultAnimation. Default false.

    Returns void

  • Defines a new named effect to be used in animation, along with a function that tells the AnimationManager how to modify that property.

    Effect names do not need to reflect GraphObject properties, and you can define an effect with a function that modifies several properties for convenience.

    For example, one could define an animation effect named "moveAndSpin" which modifies the object's position and angle.

    Most commonly, an effect is defined with one GraphObject property in mind to be animated, and the function uses the start and end values, an easing function, and the times to determine a new value for each tick of animation. Here is an example for animating the fill of GraphObjects:

    // This presumes the object to be animated is a Shape
    go.AnimationManager.defineAnimationEffect('fill', (obj, startValue, endValue, easing, currentTime, duration, animation) => {
    const hueValue = easing(currentTime, startValue, endValue - startValue, duration);
    obj.fill = 'hsl(' + hueValue + ', 100%, 80%)';


    • effectName: string

      Named effect to animate

    • animationFunction: ((obj: Diagram | GraphObject, startValue: any, endValue: any, easing: EasingFunction, currentTime: number, duration: number, animation: Animation) => void)

      Function that transforms the property values. It takes the animated object, start value, end value, easing function (the Animation.easing), current time, duration, and animation state. It should modify one or more properties on the object.

    Returns void





See AnimationStyle.Default.


See AnimationStyle.None.