Animated Element Moving Along Line Path

Demonstrates how to place and animate a DIV element moving along a connection line path using CSS offset-path with automatic path updates.

Animated Element Moving Along Line Path

Functional Overview

This example demonstrates how to place a DIV element on a connection line and animate it moving along the line’s path using CSS offset-path. The element follows the line exactly, even when nodes are dragged or the line shape changes.

Implementation of Key Features

CSS Offset-Path for Path Following

Use the CSS offset-path property to make an element follow a specific path:

const [divOffsetPath, setDivOffsetPath] = useState('');

// Set offset-path style when line is selected
setDivOffsetPath(`path('${pathInfo.pathData}')`);

Generate Line Path Data

Use graphInstance.generateLinePath() to get the SVG path data for a line:

const handleLineSelection = (line: RGLine) => {
    currentLineObject.current = line;
    const lineConfig = graphInstance.generateLineConfig(line);
    if (lineConfig) {
        const pathInfo = graphInstance.generateLinePath(lineConfig);
        setDivOffsetPath(`path('${pathInfo.pathData}')`);
    }
};

Position Control

Control the element’s position along the path with offsetDistance:

• Leave empty for continuous animation
• Set to percentage (e.g., ‘50%’) for static positioning

<div
    className={`div-on-line ${divPosition !== '' ? 'div-on-line-stoped' : ''}`}
    style={{
        offsetDistance: divPosition !== '' ? divPosition : undefined
    }}
>
    <div>⛵️</div>
</div>

Update Path on Node Drag

Recalculate the path when nodes are dragged to keep the element on the line:

const onNodeDragEnd = (nodeObject: RGNode, $event: RGUserEvent) => {
    if (currentLineObject.current) {
        handleLineSelection(currentLineObject.current!);
    }
};

Line Click Selection

Select a line by clicking and apply highlighting:

const onLineClick = (lineObject: RGLine, linkObject: RGLink, $event: RGUserEvent) => {
    handleLineSelection(lineObject);
};

Dynamic Line Shape Changes

Allow changing line shapes and update the path accordingly:

const setNewLineShape = async (newShape: number) => {
    setLineShape(newShape);
    const lines = graphInstance.getLines();
    lines.forEach(line => {
        graphInstance.updateLine(line, { lineShape: newShape });
    });

    if (currentLineObject.current) {
        handleLineSelection(currentLineObject.current!);
    }
};

Canvas Above Slot

Use RGSlotOnCanvasAbove to ensure the moving element appears above the graph:

<RelationGraph>
    <RGSlotOnCanvasAbove>
        <div style={{ '--checked-line-path': divOffsetPath }}>
            <div className="div-on-line">⛵️</div>
        </div>
    </RGSlotOnCanvasAbove>
</RelationGraph>

Creative Use Cases

• Data Flow Visualization: Animate data packets moving through connections
• Route Planning: Show vehicles or objects traveling along routes
• Progress Indicators: Display progress along a process flow
• Packet Tracing: Visualize network packets traversing topology
• Animated Tutorials: Guide users along specific paths in the graph