Expand and Collapse with Animation

Demonstrates smooth animated transitions when expanding or collapsing node children in a tree layout.

Expand and Collapse with Animation

Functional Overview

This example demonstrates smooth animated transitions when expanding or collapsing node children in a tree layout, providing visual feedback during structure changes.

Implementation of Key Features

Animated Expand/Collapse

Enable animations when toggling node visibility:

const graphOptions: RGOptions = {
    layout: {
        layoutName: 'tree',
        reLayoutWhenExpandedOrCollapsed: true
    }
};

Toggle Node Expansion

Use the expand/collapse buttons that appear on parent nodes:

// Built-in expand/collapse functionality
nodes: [
    { id: 'a', text: 'Parent', collapsed: false },
    { id: 'b', text: 'Child' }
]

Creative Use Cases

• Interactive Org Charts: Smooth department expansions
• File Explorers: Animated folder navigation
• Decision Trees: Visual branching with transitions
• Category Browsers: Expandable product categories
• Knowledge Graphs: Hierarchical concept exploration