The treeAnimation property (boolean | "Auto") controls animation when expanding or collapsing task groups.

Declaration

DayPilot.Gantt.treeAnimation

Default Value

true

Notes

  • true enables animation and is the default.

  • false disables animation.

  • "Auto" enables animation unless the system requests reduced motion using prefers-reduced-motion: reduce.

The "Auto" value is available since version 2026.4.7077; the boolean option predates this version. Use "Auto" to respect the user’s motion preference. Set duration and easing separately using treeAnimationDuration and treeAnimationEasing.

Examples

JavaScript configuration:

const dp = new DayPilot.Gantt("dp", {
  treeAnimation: "Auto"
});
dp.init();

Angular configuration:

config: DayPilot.GanttConfig = {
  treeAnimation: "Auto"
};
<daypilot-gantt [config]="config"></daypilot-gantt>

React:

<DayPilotGantt treeAnimation={"Auto"} />

Vue:

<DayPilotGantt :treeAnimation="'Auto'" />

See Also

Tree configuration

Availability

Availability of this API item in DayPilot editions:

ProductLitePro
DayPilot for JavaScript