Advanced Expand Animation with Custom Effects

Demonstrates enhanced expand/collapse animations with additional visual effects and custom transitions.

Advanced Expand Animation with Custom Effects

Functional Overview

This example demonstrates enhanced expand/collapse animations with additional visual effects and transitions beyond the basic implementation.

Implementation of Key Features

Enhanced Animation Timing

Control animation duration and easing:

graphInstance.enableCanvasAnimation();
// Perform expand/collapse operations
await graphInstance.sleep(500);
graphInstance.disableCanvasAnimation();

Custom Transitions

Add custom visual effects during expand/collapse:

const onNodeExpand = async (node: RGNode) => {
    // Add custom animation logic
    await graphInstance.enableCanvasAnimation();
    // ... expand logic
};

Creative Use Cases

• Presentations: Dramatic reveals of complex hierarchies
• Educational Tools: Step-by-step concept exploration
• Data Discovery: Guided navigation through large datasets
• Interactive Stories: Progressive disclosure of information
• Game UI: Skill trees or tech trees with polish