Skip to main content

Animate connectors

  1. Select the connectors you wish to animate. Right-click and choose Select Edges if you wish to animate all connectors.
  2. In the Style tab of the format panel, enable Flow Animation.
Enable Flow Animation on your connectors in draw.io via the Style tab.

The connectors will now appear as if they have dashes moving from the source connection point to the target connection point.

Expand the Properties to see more connector flow animation settings. Here,yYou can change the Flow Duration, Flow Timing and Flow Direction.
Enable Flow Animation on your connectors in draw.io via the shape Properties in the Style tab.

Export your diagram to a SVG file to include the connector animation when you publish it in a web page or on a content platform that supports SVG images.

Connectors that are animated show flowing dashes or dots from the source shape to the target shape

You can also export your diagram to an animated GIF image which automatically loops any flop animations you have applied to connectors.

See more about connector styles in draw.io

You can set or toggle the Flow Animation style on connectors with custom links and page animations.