Edge Animation

Enable edge animation with the animated property:

// Scrolling dashes (default animation)
{ id: 'e1', source: 'a', target: 'b', animated: true }

// Specific mode
{ id: 'e2', source: 'a', target: 'b', animated: 'pulse' }

Left to right: dash, pulse, and dot:

INTERACTIVE 
<div x-data="flowCanvas({
    nodes: [
        { id: 'a1', position: { x: 0, y: 0 }, data: { label: 'Dash' } },
        { id: 'a2', position: { x: 85, y: 130 }, data: { label: 'Dash' } },
        { id: 'b1', position: { x: 220, y: 0 }, data: { label: 'Pulse' } },
        { id: 'b2', position: { x: 305, y: 130 }, data: { label: 'Pulse' } },
        { id: 'c1', position: { x: 440, y: 0 }, data: { label: 'Dot' } },
        { id: 'c2', position: { x: 525, y: 130 }, data: { label: 'Dot' } },
    ],
    edges: [
        { id: 'e1', source: 'a1', target: 'a2', animated: true },
        { id: 'e2', source: 'b1', target: 'b2', animated: 'pulse' },
        { id: 'e3', source: 'c1', target: 'c2', animated: 'dot' },
    ],
    background: 'dots',
    fitViewOnInit: true,
    controls: false,
    pannable: false,
    zoomable: false,
})" class="flow-container" style="height: 250px;">
    <div x-flow-viewport>
        <template x-for="node in nodes" :key="node.id">
            <div x-flow-node="node">
                <div x-flow-handle:target></div>
                <span x-text="node.data.label"></span>
                <div x-flow-handle:source></div>
            </div>
        </template>
    </div>
</div>

Animation modes

Value CSS class Visual
true / 'dash' .flow-edge-animated Scrolling dash pattern along the edge stroke.
'pulse' .flow-edge-pulse Opacity breathing effect (fades between 1.0 and --flow-edge-pulse-min-opacity).
'dot' .flow-edge-dot A circle element traveling along the path from source to target.

Timing overrides

Property Type Applies to Description
animationDuration string All modes CSS time value (e.g. '1s', '300ms'). Overrides the mode's CSS variable.
particleColor string 'dot' Fill color. Overrides --flow-edge-dot-fill.
particleSize number 'dot' Circle radius in SVG units. Overrides --flow-edge-dot-size.

CSS variables

Variable Description
--flow-edge-animated-duration Duration of the dash scroll animation.
--flow-edge-animated-dasharray Dash pattern for the dash animation.
--flow-edge-pulse-duration Duration of the pulse breathing cycle.
--flow-edge-pulse-min-opacity Minimum opacity during pulse animation.
--flow-edge-dot-duration Duration for the dot to travel the full path.
--flow-edge-dot-size Circle radius for the dot animation.
--flow-edge-dot-fill Fill color for the dot animation.

See also

  • Edge Types -- all available edge path types
  • Styling -- colors, stroke width, and CSS classes