Animating Edges

Vue Flow provides a simple built-in animation for the default edge type, but it is possible to create more advanced animations by using custom edges. Below are a collection of examples showing different ways an edge path might be animated.

Animating SVG elements

import type { Edge } from '@xyflow/vue';
 
export type AnimatedSvgEdgeType = Edge<Record<string, unknown>, 'animatedSvg'>;

Animating other nodes

import type { Edge } from '@xyflow/vue';
 
export type AnimatedEdge = Edge<{ node: string }, 'animated'>;