create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
185 lines • 55.2 kB
HTML
<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><link rel="stylesheet" href="../../assets/css/style.css"/><link rel="preconnect" href="https://rsms.me/"/><link rel="stylesheet" href="https://rsms.me/inter/inter.css"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>AnimationManager | GoJS API</title><meta name="description" content="Documentation for GoJS API"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><link rel="stylesheet" href="../assets/custom.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script type="text/javascript">// formerly in api.js
var hash = null;
function changeHash() {
var panels = document.getElementsByClassName("tsd-panel");
for (let i = 0; i < panels.length; i++) {
var p = panels[i];
p.classList.remove("targeted");
}
hash = window.location.hash.slice(1);
if (hash) {
var elt = document.getElementById(hash);
if (elt) elt.parentNode.classList.add("targeted");
}
}
document.addEventListener("DOMContentLoaded", changeHash);
window.addEventListener("hashchange", changeHash);</script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header><nav id="navTop" class="w-full h-[var(--topnav-h)] z-30 bg-[var(--color-background-secondary)] border-b border-b-[var(--color-accent)]"><div class="max-w-screen-xl mx-auto flex flex-wrap items-start justify-between px-4"><a class="!text-white bg-nwoods-primary font-bold !leading-[calc(var(--topnav-h)_-_1px)] my-0 px-2 text-4xl lg:text-5xl logo" href="../../index.html">GoJS</a><div class="relative"><button id="topnavButton" class="h-[calc(var(--topnav-h)_-_1px)] px-2 m-0 text-[var(--color-text)] bg-inherit shadow-none md:hidden hover:!bg-inherit hover:!text-nwoods-accent hover:!shadow-none" aria-label="Navigation"><svg class="h-7 w-7 block" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div id="topnavList" class="hidden md:block"><div class="absolute right-0 z-30 flex flex-col items-end rounded border border-[var(--color-accent)] p-4 pl-12 shadow bg-[var(--color-background-secondary)] text-[var(--color-text)] font-semibold
md:flex-row md:space-x-4 md:items-start md:border-0 md:p-0 md:shadow-none md:!bg-inherit"><a href="../../learn/index.html">Learn</a><a href="../../samples/index.html">Samples</a><a href="../../intro/index.html">Intro</a><a class="active" href="../../api/index.html">API</a><a href="../../download.html">Download</a><a href="https://forum.nwoods.com/c/gojs/11" target="_blank" rel="noopener">Forum</a><a href="https://nwoods.com/contact.html" target="_blank" rel="noopener" id="contactBtn">Contact</a><a href="https://nwoods.com/sales/index.html" target="_blank" rel="noopener" id="buyBtn">Buy</a></div></div></div></div></nav><script>window.addEventListener("DOMContentLoaded", function () {
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
if (topButton && topnavList) {
topButton.addEventListener("click", function (e) {
topnavList
.classList
.toggle("hidden");
e.stopPropagation();
});
document.addEventListener("click", function (e) {
// if the clicked element isn't the list, close the list
if (!topnavList.classList.contains("hidden") && !e.target.closest("#topnavList")) {
topButton.click();
}
});
// set active <a> element
// done via active tag below, always API
}
});</script><div class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><div id="tsd-search-help"><code class="!text-lg">/</code> to search</div><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">GoJS API</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><div class="flex w-full max-w-screen-xl mx-auto px-2 items-center justify-between"><div><ul class="tsd-breadcrumb"><li><a href="../index.html">GoJS API</a></li><li><a href="AnimationManager.html">AnimationManager</a></li></ul><h1 class="flex items-center">Class AnimationManager</h1></div><div class="text-xs"><b>GoJS</b>® Diagramming Components<br/>version 3.1.0<br/>by <a href="https://nwoods.com/">Northwoods Software®</a></div></div></div><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>AnimationManager handles animations in a <a href="Diagram.html" class="tsd-kind-class">Diagram</a>. Each Diagram has one, <a href="Diagram.html#animationManager" class="tsd-kind-accessor">Diagram.animationManager</a>.
Setting the Model, performing a Layout, Group expansion and Tree expansion automatically start animations through
the <a href="AnimationManager.html#defaultAnimation" class="tsd-kind-accessor">defaultAnimation</a>. Animations can be manually started by creating <a href="Animation.html" class="tsd-kind-class">Animation</a>s, which are associated with an
AnimationManager.</p>
<p>Animation is enabled by default, setting the <a href="AnimationManager.html#isEnabled" class="tsd-kind-accessor">isEnabled</a> property to false will turn off animations for a Diagram.</p>
<p>When the <a href="AnimationManager.html#defaultAnimation" class="tsd-kind-accessor">defaultAnimation</a> begins it raises the <code>"AnimationStarting"</code> Diagram event,
upon completion it raises the <code>"AnimationFinished"</code> Diagram event.</p>
<p>The <a href="AnimationManager.html#defaultAnimation" class="tsd-kind-accessor">defaultAnimation</a>, 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 <a href="Animation.html" class="tsd-kind-class">Animation</a> is stopped, the Diagram immediately finishes the animation and draws the final state.
Animations can be stopped programmatically with the methods <a href="AnimationManager.html#stopAnimation" class="tsd-kind-method">AnimationManager.stopAnimation</a> or <a href="Animation.html#stop" class="tsd-kind-method">Animation.stop</a>.</p>
</div></section><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-index-accordion" open><summary class="tsd-accordion-summary tsd-index-summary"><h5 class="tsd-index-heading uppercase" role="button" aria-expanded="true" tabIndex="0"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-chevronSmall"></use></svg> Index</h5></summary><div class="tsd-accordion-details"><section class="tsd-index-section"><h3 class="tsd-index-heading">Constructors</h3><div class="tsd-index-list"><a href="AnimationManager.html#constructor" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-512"></use></svg><span>constructor</span></a>
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Accessors</h3><div class="tsd-index-list"><a href="AnimationManager.html#activeAnimations" class="tsd-index-link"><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><g id="subicon-R,#FF4D4D"><rect fill="var(--color-icon-background)" width="28" height="28" rx="14"></rect><path transform="translate(2, 2)" fill="none" stroke-width="1.5" stroke="var(--color-text)" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" stroke-linecap="round" stroke-linejoin="round"></path></g></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>active<wbr/>Animations</span></a>
<a href="AnimationManager.html#defaultAnimation" class="tsd-index-link"><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF4D4D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>default<wbr/>Animation</span></a>
<a href="AnimationManager.html#duration" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>duration</span></a>
<a href="AnimationManager.html#initialAnimationStyle" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>initial<wbr/>Animation<wbr/>Style</span></a>
<a href="AnimationManager.html#isAnimating" class="tsd-index-link"><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF4D4D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>is<wbr/>Animating</span></a>
<a href="AnimationManager.html#isEnabled" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>is<wbr/>Enabled</span></a>
<a href="AnimationManager.html#isInitial" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>is<wbr/>Initial</span></a>
<a href="AnimationManager.html#isTicking" class="tsd-index-link"><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF4D4D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>is<wbr/>Ticking</span></a>
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Methods</h3><div class="tsd-index-list"><a href="AnimationManager.html#canStart" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>can<wbr/>Start</span></a>
<a href="AnimationManager.html#stopAnimation" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>stop<wbr/>Animation</span></a>
<a href="AnimationManager.html#defineAnimationEffect" class="tsd-index-link"><svg class="static tsd-subicon" viewBox="0 0 28 28"><g id="subicon-S,#FF4DB8"><rect fill="var(--color-icon-background)" width="28" height="28" rx="14"></rect><path transform="translate(2, 2)" fill="none" stroke-width="1.5" stroke="var(--color-text)" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>define<wbr/>Animation<wbr/>Effect</span></a>
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Properties</h3><div class="tsd-index-list"><a href="AnimationManager.html#AnimateLocations" class="tsd-index-link deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><g id="subicon-S,#FF984D"><rect fill="var(--color-icon-background)" width="28" height="28" rx="14"></rect><path transform="translate(2, 2)" fill="none" stroke-width="1.5" stroke="var(--color-text)" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><g id="subicon-R,#FF984D"><rect fill="var(--color-icon-background)" width="28" height="28" rx="14"></rect><path transform="translate(2, 2)" fill="none" stroke-width="1.5" stroke="var(--color-text)" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" stroke-linecap="round" stroke-linejoin="round"></path></g></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Animate<wbr/>Locations</span></a>
<a href="AnimationManager.html#Default" class="tsd-index-link deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Default</span></a>
<a href="AnimationManager.html#None" class="tsd-index-link deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>None</span></a>
</div></section></div></details></section></section><section class="tsd-panel-group tsd-member-group"><h2>Constructors</h2><section class="tsd-panel tsd-member"><a id="constructor" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>constructor</span><a href="#constructor" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="constructor.new_AnimationManager" class="tsd-anchor"></a><span class="tsd-kind-constructor-signature">new <wbr/>Animation<wbr/>Manager</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">init</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="AnimationManager.html" class="tsd-signature-type tsd-kind-class">AnimationManager</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="AnimationManager.html" class="tsd-signature-type tsd-kind-class">AnimationManager</a><a href="#constructor.new_AnimationManager" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>You do not normally need to create an instance of this class because one already exists as the <a href="Diagram.html#animationManager" class="tsd-kind-accessor">Diagram.animationManager</a>, which you can modify.</p>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><h5><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">init</span>: <span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="AnimationManager.html" class="tsd-signature-type tsd-kind-class">AnimationManager</a><span class="tsd-signature-symbol">></span></h5><div class="tsd-comment tsd-typography"><p>Optional initialization properties.
This is typically only used in the <a href="Diagram.html" class="tsd-kind-class">Diagram</a> constructor to set properties on the <a href="Diagram.html#animationManager" class="tsd-kind-accessor">Diagram.animationManager</a>.</p>
</div></li></ul></div><h4 class="tsd-returns-title">Returns <a href="AnimationManager.html" class="tsd-signature-type tsd-kind-class">AnimationManager</a></h4></li></ul></section></section><section class="tsd-panel-group tsd-member-group"><h2>Accessors</h2><section class="tsd-panel tsd-member"><a id="activeAnimations" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagReadOnly">Readonly</code><span>active<wbr/>Animations</span><div class="membertype"><span class="tsd-signature-symbol">: </span><a href="Set.html" class="tsd-signature-type tsd-kind-class">Set</a><span class="tsd-signature-symbol"><</span><a href="Animation.html" class="tsd-signature-type tsd-kind-class">Animation</a><span class="tsd-signature-symbol">></span></div><a href="#activeAnimations" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets the set of currently animating <a href="Animation.html" class="tsd-kind-class">Animation</a>s being managed by this AnimationManager, including any running <a href="AnimationManager.html#defaultAnimation" class="tsd-kind-accessor">defaultAnimation</a>.</p>
</div><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">since</code><p>2.1</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member"><a id="defaultAnimation" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagReadOnly">Readonly</code><span>default<wbr/>Animation</span><div class="membertype"><span class="tsd-signature-symbol">: </span><a href="Animation.html" class="tsd-signature-type tsd-kind-class">Animation</a></div><a href="#defaultAnimation" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>This read-only property gets the <a href="Animation.html" class="tsd-kind-class">Animation</a> that carries out the default built-in GoJS animations.
This animation is usually only referenced to modify default animation properties,
such as the <a href="Animation.html#easing" class="tsd-kind-accessor">Animation.easing</a> or <a href="Animation.html#duration" class="tsd-kind-accessor">Animation.duration</a>.</p>
<p>You should not add anything to or start the default animation, GoJS does so automatically, internally.
When the default animation begins it raises the <code>"AnimationStarting"</code> Diagram event,
upon completion it raises the <code>"AnimationFinished"</code> Diagram event.
You should not modify the properties <a href="Animation.html#runCount" class="tsd-kind-accessor">Animation.runCount</a> or <a href="Animation.html#reversible" class="tsd-kind-accessor">Animation.reversible</a> on the default animation.</p>
<p>See the <a href="../../intro/animation.html">Introduction Page on Animations</a> for more detail.</p>
</div><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">since</code><p>2.1</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member"><a id="duration" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>duration</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></div><a href="#duration" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the default duration, in milliseconds, used as the duration for the <a href="AnimationManager.html#defaultAnimation" class="tsd-kind-accessor">defaultAnimation</a>
and for animations that have their <a href="Animation.html#duration" class="tsd-kind-accessor">Animation.duration</a> set to <code>NaN</code>.</p>
<p>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.</p>
</div><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">see</code><p><a href="Animation.html#duration" class="tsd-kind-accessor">Animation.duration</a></p>
</div></div></li></ul></section><section class="tsd-panel tsd-member"><a id="initialAnimationStyle" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>initial<wbr/>Animation<wbr/>Style</span><div class="membertype"><span class="tsd-signature-symbol">: </span><a href="AnimationStyle.html" class="tsd-signature-type tsd-kind-enum">AnimationStyle</a></div><a href="#initialAnimationStyle" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the initial animation style that is set up by the <a href="AnimationManager.html#defaultAnimation" class="tsd-kind-accessor">defaultAnimation</a>.
This can be <a href="AnimationStyle.html#Default" class="tsd-kind-enum-member">AnimationStyle.Default</a>, <a href="AnimationStyle.html#AnimateLocations" class="tsd-kind-enum-member">AnimationStyle.AnimateLocations</a>, or <a href="AnimationStyle.html#None" class="tsd-kind-enum-member">AnimationStyle.None</a>.</p>
<ul>
<li>If set to <a href="AnimationStyle.html#Default" class="tsd-kind-enum-member">AnimationStyle.Default</a>, the initial animation will "fade up"
the Diagram's contents by animating the <a href="Diagram.html#position" class="tsd-kind-accessor">Diagram.position</a> and <a href="Diagram.html#opacity" class="tsd-kind-accessor">Diagram.opacity</a>.</li>
<li>If set to <a href="AnimationStyle.html#AnimateLocations" class="tsd-kind-enum-member">AnimationStyle.AnimateLocations</a>, the initial animation will animate Part locations from <code>(0, 0)</code> to their values, as GoJS 2.0 and prior do.</li>
<li>If set to <a href="AnimationStyle.html#None" class="tsd-kind-enum-member">AnimationStyle.None</a>, no initial animation will happen by default,
which this allows you to specify your own initial animation by defining a <code>"InitialAnimationStarting"</code> DiagramEvent listener with <a href="Diagram.html#addDiagramListener" class="tsd-kind-method">Diagram.addDiagramListener</a>.</li>
</ul>
<p>An example custom initial animation, which zooms the Diagram into view:</p>
<pre><code class="language-js"><span class="hl-4">myDiagram</span><span class="hl-2">.</span><span class="hl-4">animationManager</span><span class="hl-2">.</span><span class="hl-4">initialAnimationStyle</span><span class="hl-2"> = </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-4">AnimationStyle</span><span class="hl-2">.</span><span class="hl-4">None</span><span class="hl-2">;</span><br/><span class="hl-4">myDiagram</span><span class="hl-2">.</span><span class="hl-5">addDiagramListener</span><span class="hl-2">(</span><span class="hl-6">'InitialAnimationStarting'</span><span class="hl-2">, </span><span class="hl-4">e</span><span class="hl-2"> </span><span class="hl-1">=></span><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-1">const</span><span class="hl-2"> </span><span class="hl-3">animation</span><span class="hl-2"> = </span><span class="hl-4">e</span><span class="hl-2">.</span><span class="hl-4">subject</span><span class="hl-2">.</span><span class="hl-4">defaultAnimation</span><span class="hl-2">;</span><br/><span class="hl-2"> </span><span class="hl-4">animation</span><span class="hl-2">.</span><span class="hl-4">easing</span><span class="hl-2"> = </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-4">Animation</span><span class="hl-2">.</span><span class="hl-4">EaseOutExpo</span><span class="hl-2">;</span><br/><span class="hl-2"> </span><span class="hl-4">animation</span><span class="hl-2">.</span><span class="hl-4">duration</span><span class="hl-2"> = </span><span class="hl-7">900</span><span class="hl-2">;</span><br/><span class="hl-2"> </span><span class="hl-4">animation</span><span class="hl-2">.</span><span class="hl-5">add</span><span class="hl-2">(</span><span class="hl-4">e</span><span class="hl-2">.</span><span class="hl-4">diagram</span><span class="hl-2">, </span><span class="hl-6">'scale'</span><span class="hl-2">, </span><span class="hl-7">0.1</span><span class="hl-2">, </span><span class="hl-7">1</span><span class="hl-2">);</span><br/><span class="hl-2"> </span><span class="hl-4">animation</span><span class="hl-2">.</span><span class="hl-5">add</span><span class="hl-2">(</span><span class="hl-4">e</span><span class="hl-2">.</span><span class="hl-4">diagram</span><span class="hl-2">, </span><span class="hl-6">'opacity'</span><span class="hl-2">, </span><span class="hl-7">0</span><span class="hl-2">, </span><span class="hl-7">1</span><span class="hl-2">);</span><br/><span class="hl-2">});</span>
</code><button>Copy</button></pre>
</div><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">since</code><p>2.1</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member"><a id="isAnimating" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagReadOnly">Readonly</code><span>is<wbr/>Animating</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></div><a href="#isAnimating" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>This read-only property is true when the animation manager is currently animating any animation,
including the <a href="AnimationManager.html#defaultAnimation" class="tsd-kind-accessor">defaultAnimation</a>.</p>
<p>This value cannot be set, but animation can be stopped by calling <a href="AnimationManager.html#stopAnimation" class="tsd-kind-method">stopAnimation</a>,
and it can be prevented by setting <a href="AnimationManager.html#isEnabled" class="tsd-kind-accessor">isEnabled</a>.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="isEnabled" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>is<wbr/>Enabled</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></div><a href="#isEnabled" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets whether this AnimationManager operates.</p>
<p>The default value is <code>true</code>.
Setting this to <code>false</code> does not stop an animation, it only stops future animations.
To stop any ongoing animation, use <a href="AnimationManager.html#stopAnimation" class="tsd-kind-method">stopAnimation</a>.
To disable only the default animations, set <a href="AnimationManager.html#canStart" class="tsd-kind-method">canStart</a> to a function that always returns <code>false</code>.</p>
<p>If any indefinite animations (animations with <a href="Animation.html#runCount" class="tsd-kind-accessor">Animation.runCount</a> set to <code>Infinity</code>) were running
when this is set to <code>false</code>, they will be resumed when this is set to <code>true</code>.</p>
<p>Setting this property does not raise any events.</p>
</div><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">see</code><p><a href="AnimationManager.html#canStart" class="tsd-kind-method">canStart</a></p>
</div></div></li></ul></section><section class="tsd-panel tsd-member"><a id="isInitial" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>is<wbr/>Initial</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></div><a href="#isInitial" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets whether a default animation is performed on an initial layout.</p>
<p>The default value is true.
Changing the value does not affect any ongoing animation.
Setting this property does not raise any events.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="isTicking" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagReadOnly">Readonly</code><span>is<wbr/>Ticking</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></div><a href="#isTicking" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>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.</p>
<p><code>isTicking</code> can only be true when <a href="AnimationManager.html#isAnimating" class="tsd-kind-accessor">isAnimating</a> is also true.</p>
</div></li></ul></section></section><section class="tsd-panel-group tsd-member-group"><h2>Methods</h2><section class="tsd-panel tsd-member"><a id="canStart" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>can<wbr/>Start</span><a href="#canStart" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="canStart.canStart-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">can<wbr/>Start</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">reason</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><a href="#canStart.canStart-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>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.</p>
<p>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 <a href="AnimationTrigger.html" class="tsd-kind-class">AnimationTrigger</a>s, to run.</p>
<p>These are the possible reasons GoJS will begin an animation:</p>
<p><strong>Called by CommandHandler:</strong></p>
<ul>
<li>"Collapse SubGraph"</li>
<li>"Expand SubGraph"</li>
<li>"Collapse Tree"</li>
<li>"Expand Tree"</li>
<li>"Scroll To Part"</li>
<li>"Zoom To Fit"</li>
</ul>
<p><strong>Called by Diagram:</strong></p>
<ul>
<li>"Model"</li>
<li>"Layout"</li>
</ul>
<p><strong>Called by AnimationTriggers:</strong></p>
<ul>
<li>"Trigger"</li>
</ul>
<p>Example usage:</p>
<pre><code class="language-js"><span class="hl-0">// disallow expand/collapse animations, but allow all other default animations:</span><br/><span class="hl-4">myDiagram</span><span class="hl-2">.</span><span class="hl-4">animationManager</span><span class="hl-2">.</span><span class="hl-5">canStart</span><span class="hl-2"> = </span><span class="hl-1">function</span><span class="hl-2">(</span><span class="hl-4">reason</span><span class="hl-2">) {</span><br/><span class="hl-2"> </span><span class="hl-8">if</span><span class="hl-2"> (</span><span class="hl-4">reason</span><span class="hl-2"> === </span><span class="hl-6">"Expand Tree"</span><span class="hl-2">) </span><span class="hl-8">return</span><span class="hl-2"> </span><span class="hl-1">false</span><span class="hl-2">;</span><br/><span class="hl-2"> </span><span class="hl-8">return</span><span class="hl-2"> </span><span class="hl-1">true</span><span class="hl-2">;</span><br/><span class="hl-2">}</span><br/><br/><span class="hl-0">// disallow all default animations:</span><br/><span class="hl-4">myDiagram</span><span class="hl-2">.</span><span class="hl-4">animationManager</span><span class="hl-2">.</span><span class="hl-5">canStart</span><span class="hl-2"> = </span><span class="hl-1">function</span><span class="hl-2">(</span><span class="hl-4">reason</span><span class="hl-2">) {</span><br/><span class="hl-2"> </span><span class="hl-8">return</span><span class="hl-2"> </span><span class="hl-1">false</span><span class="hl-2">;</span><br/><span class="hl-2">}</span>
</code><button>Copy</button></pre>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><h5><span class="tsd-kind-parameter">reason</span>: <span class="tsd-signature-type">string</span></h5><div class="tsd-comment tsd-typography"><p>Reason for starting the animation</p>
</div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">since</code><p>2.1</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member"><a id="stopAnimation" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>stop<wbr/>Animation</span><a href="#stopAnimation" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="stopAnimation.stopAnimation-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">stop<wbr/>Animation</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">stopsAllAnimations</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#stopAnimation.stopAnimation-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Stops the <a href="AnimationManager.html#defaultAnimation" class="tsd-kind-accessor">defaultAnimation</a> and updates the Diagram to its final state.</p>
<p>If the argument is true, this stops all running animations.
If an Animation was about to begin, it will be cancelled.</p>
<p>If the <a href="AnimationManager.html#defaultAnimation" class="tsd-kind-accessor">AnimationManager.defaultAnimation</a> is running, this will raise the <code>"AnimationFinished"</code> Diagram event.</p>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><h5><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">stopsAllAnimations</span>: <span class="tsd-signature-type">boolean</span></h5><div class="tsd-comment tsd-typography"><p>Whether to stop all animations, instead of just the <a href="AnimationManager.html#defaultAnimation" class="tsd-kind-accessor">defaultAnimation</a>. Default false.</p>
</div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section><section class="tsd-panel tsd-member"><a id="defineAnimationEffect" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <span>define<wbr/>Animation<wbr/>Effect</span><a href="#defineAnimationEffect" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="defineAnimationEffect.defineAnimationEffect-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">define<wbr/>Animation<wbr/>Effect</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">effectName</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>, <span class="tsd-kind-parameter">animationFunction</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">obj</span><span class="tsd-signature-symbol">: </span><a href="Diagram.html" class="tsd-signature-type tsd-kind-class">Diagram</a><span class="tsd-signature-symbol"> | </span><a href="GraphObject.html" class="tsd-signature-type tsd-kind-class">GraphObject</a>, <span class="tsd-kind-parameter">startValue</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span>, <span class="tsd-kind-parameter">endValue</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span>, <span class="tsd-kind-parameter">easing</span><span class="tsd-signature-symbol">: </span><a href="EasingFunction.html" class="tsd-signature-type tsd-kind-type-alias">EasingFunction</a>, <span class="tsd-kind-parameter">currentTime</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, <span class="tsd-kind-parameter">duration</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, <span class="tsd-kind-parameter">animation</span><span class="tsd-signature-symbol">: </span><a href="Animation.html" class="tsd-signature-type tsd-kind-class">Animation</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#defineAnimationEffect.defineAnimationEffect-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Defines a new named effect to be used in animation, along with a function that tells the AnimationManager how to modify that property.</p>
<p>Effect names do not need to reflect GraphObject properties, and you can define an effect with a function that modifies several properties for convenience.</p>
<p>For example, one could define an animation effect named <code>"moveAndSpin"</code> which modifies the object's <code>position</code> and <code>angle</code>.</p>
<p>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:</p>
<pre><code class="language-js"><span class="hl-0">// This presumes the object to be animated is a Shape</span><br/><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-4">AnimationManager</span><span class="hl-2">.</span><span class="hl-5">defineAnimationEffect</span><span class="hl-2">(</span><span class="hl-6">'fill'</span><span class="hl-2">, (</span><span class="hl-4">obj</span><span class="hl-2">, </span><span class="hl-4">startValue</span><span class="hl-2">, </span><span class="hl-4">endValue</span><span class="hl-2">, </span><span class="hl-4">easing</span><span class="hl-2">, </span><span class="hl-4">currentTime</span><span class="hl-2">, </span><span class="hl-4">duration</span><span class="hl-2">, </span><span class="hl-4">animation</span><span class="hl-2">) </span><span class="hl-1">=></span><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-1">const</span><span class="hl-2"> </span><span class="hl-3">hueValue</span><span class="hl-2"> = </span><span class="hl-5">easing</span><span class="hl-2">(</span><span class="hl-4">currentTime</span><span class="hl-2">, </span><span class="hl-4">startValue</span><span class="hl-2">, </span><span class="hl-4">endValue</span><span class="hl-2"> - </span><span class="hl-4">startValue</span><span class="hl-2">, </span><span class="hl-4">duration</span><span class="hl-2">);</span><br/><span class="hl-2"> </span><span class="hl-4">obj</span><span class="hl-2">.</span><span class="hl-4">fill</span><span class="hl-2"> = </span><span class="hl-6">'hsl('</span><span class="hl-2"> + </span><span class="hl-4">hueValue</span><span class="hl-2"> + </span><span class="hl-6">', 100%, 80%)'</span><span class="hl-2">;</span><br/><span class="hl-2">});</span>
</code><button>Copy</button></pre>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><h5><span class="tsd-kind-parameter">effectName</span>: <span class="tsd-signature-type">string</span></h5><div class="tsd-comment tsd-typography"><p>Named effect to animate</p>
</div></li><li><h5><span class="tsd-kind-parameter">animationFunction</span>: <span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">obj</span><span class="tsd-signature-symbol">: </span><a href="Diagram.html" class="tsd-signature-type tsd-kind-class">Diagram</a><span class="tsd-signature-symbol"> | </span><a href="GraphObject.html" class="tsd-signature-type tsd-kind-class">GraphObject</a>, <span class="tsd-kind-parameter">startValue</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span>, <span class="tsd-kind-parameter">endValue</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span>, <span class="tsd-kind-parameter">easing</span><span class="tsd-signature-symbol">: </span><a href="EasingFunction.html" class="tsd-signature-type tsd-kind-type-alias">EasingFunction</a>, <span class="tsd-kind-parameter">currentTime</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, <span class="tsd-kind-parameter">duration</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, <span class="tsd-kind-parameter">animation</span><span class="tsd-signature-symbol">: </span><a href="Animation.html" class="tsd-signature-type tsd-kind-class">Animation</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span></h5><div class="tsd-comment tsd-typography"><p>Function
that transforms the property values. It takes the animated object, start value, end value,
easing function (the <a href="Animation.html#easing" class="tsd-kind-accessor">Animation.easing</a>), current time, duration, and animation state. It should modify one or more properties on the object.</p>
</div><ul class="tsd-parameters"><li class="tsd-parameter-signature"><ul class="tsd-signatures"><li class="tsd-signature"><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">obj</span><span class="tsd-signature-symbol">: </span><a href="Diagram.html" class="tsd-signature-type tsd-kind-class">Diagram</a><span class="tsd-signature-symbol"> | </span><a href="GraphObject.html" class="tsd-signature-type tsd-kind-class">GraphObject</a>, <span class="tsd-kind-parameter">startValue</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span>, <span class="tsd-kind-parameter">endValue</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span>, <span class="tsd-kind-parameter">easing</span><span class="tsd-signature-symbol">: </span><a href="EasingFunction.html" class="tsd-signature-type tsd-kind-type-alias">EasingFunction</a>, <span class="tsd-kind-parameter">currentTime</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, <span class="tsd-kind-parameter">duration</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, <span class="tsd-kind-parameter">animation</span><span class="tsd-signature-symbol">: </span><a href="Animation.html" class="tsd-signature-type tsd-kind-class">Animation</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li><li class="tsd-description"><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><h5><span class="tsd-kind-parameter">obj</span>: <a href="Diagram.html" class="tsd-signature-type tsd-kind-class">Diagram</a><span class="tsd-signature-symbol"> | </span><a href="GraphObject.html" class="tsd-signature-type tsd-kind-class">GraphObject</a></h5></li><li><h5><span class="tsd-kind-parameter">startValue</span>: <span class="tsd-signature-type">any</span></h5></li><li><h5><span class="tsd-kind-parameter">endValue</span>: <span class="tsd-signature-type">any</span></h5></li><li><h5><span class="tsd-kind-parameter">easing</span>: <a href="EasingFunction.html" class="tsd-signature-type tsd-kind-type-alias">EasingFunction</a></h5></li><li><h5><span class="tsd-kind-parameter">currentTime</span>: <span class="tsd-signature-type">number</span></h5></li><li><h5><span class="tsd-kind-parameter">duration</span>: <span class="tsd-signature-type">number</span></h5></li><li><h5><span class="tsd-kind-parameter">animation</span>: <a href="Animation.html" class="tsd-signature-type tsd-kind-class">Animation</a></h5></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></li></ul></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">since</code><p>2.1</p>
</div></div></li></ul></section></section><section class="tsd-panel-group tsd-member-group"><h2>Properties</h2><section class="tsd-panel tsd-member"><a id="AnimateLocations" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span class="deprecated">Animate<wbr/>Locations</span><a href="#AnimateLocations" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">deprecated</code><p>See <a href="AnimationStyle.html#AnimateLocations" class="tsd-kind-enum-member">AnimationStyle.AnimateLocations</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="Default" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span class="deprecated">Default</span><a href="#Default" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">deprecated</code><p>See <a href="AnimationStyle.html#Default" class="tsd-kind-enum-member">AnimationStyle.Default</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="None" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span class="deprecated">None</span><a href="#None" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">deprecated</code><p>See <a href="AnimationStyle.html#None" class="tsd-kind-enum-member">AnimationStyle.None</a>.</p>
</div></div></section></section></div><div class="col-sidebar"><div class="page-menu"><details open class="tsd-index-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><ul><li><a href="#constructor"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-512"></use></svg><span>constructor</span></a></li><li><a href="#activeAnimations"><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF4D4D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>active<wbr/>Animations</span></a></li><li><a href="#defaultAnimation"><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF4D4D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>default<wbr/>Animation</span></a></li><li><a href="#duration"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>duration</span></a></li><li><a href="#initialAnimationStyle"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>initial<wbr/>Animation<wbr/>Style</span></a></li><li><a href="#isAnimating"><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF4D4D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>is<wbr/>Animating</span></a></li><li><a href="#isEnabled"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>is<wbr/>Enabled</span></a></li><li><a href="#isInitial"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>is<wbr/>Initial</span></a></li><li><a href="#isTicking"><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF4D4D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>is<wbr/>Ticking</span></a></li><li><a href="#canStart"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>can<wbr/>Start</span></a></li><li><a href="#stopAnimation"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>stop<wbr/>Animation</span></a></li><li><a href="#defineAnimationEffect"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF4DB8"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>define<wbr/>Animation<wbr/>Effect</span></a></li><li><a href="#AnimateLocations" class="deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Animate<wbr/>Locations</span></a></li><li><a href="#Default" class="deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Default</span></a></li><li><a href="#None" class="deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>None</span></a></li></ul></div></details><div class="tsd-navigation settings"><div class="tsd-theme-toggle"><h4 class="uppercase">Theme</h4><select id="tsd-theme"><option value="os">System</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../index.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>GoJS API</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><div class="tsd w-full max-w-screen-xl mx-auto px-2"><div class="bottom-copyright">Copyright © 1998-2025 by Northwoods Software Corporation.</div></div><div class="overlay"></div><script async src="https://www.googletagmanager.com/gtag/js?id=G-S5QK8VSK84"></script><script>window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-S5QK8VSK84');
var getOutboundLink = function(url, label) {
gtag('event', 'click', {
'event_category': 'outbound',
'event_label': label,
'transport_type': 'beacon'
});
}
document.getElementById("contactBtn").addEventListener("click", function() {
getOutboundLink('https://nwoods.com/contact.html', 'contact');
});
document.getElementById("buyBtn").addEventListener("click", function() {
getOutboundLink('https://nwoods.com/sales/index.html', 'buy');
});</script></body></html>