Animated Line

Emphasize a connection with an animated line.

How to use

Choose type, direction, length and thickness.
Set start/end arrowheads, duration and delay.
Enable looping if needed and check presentation mode.

Things to check

It does not automatically attach to neighboring blocks; check alignment after moving them.

Property reference

Select the module in the editor to change its settings. Technical identifiers below are kept unchanged for reference; some advanced fields are stored as structured data rather than separate controls.

Find a property

21 / 21

animationDelay

Controls movement speed, duration or delay. Units are shown in the editor control; test timing in presentation mode.

number

animationDuration

Controls movement speed, duration or delay. Units are shown in the editor control; test timing in presentation mode.

number

animationLoop

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean

animationPaused

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean

arrowColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

arrowFilled

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean

arrowSize

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

arrowStyle

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

'triangle' | 'triangle-reverse' | 'chevron' | 'diamond' | 'circle'

color

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

direction

Sets the associated element alignment, placement or direction; preview it within the content area.

'left-to-right' | 'right-to-left' | 'top-to-bottom' | 'bottom-to-top' | 'clockwise' | 'counter-clockwise' | 'left-half' | 'right-half' | 'left-single-line' | 'right-single-line' | 'zigzag-left-to-right' | 'zigzag-right-to-left' | 'wave-left-to-right' | 'wave-right-to-left' | 'spiral-clockwise' | 'spiral-counter-clockwise' | 'lightning-left-to-right' | 'lightning-right-to-left' | 'curve-left-to-right' | 'curve-right-to-left'

lineLength

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

lineStyle

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

'solid' | 'dashed' | 'dotted'

lineType

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

'horizontal' | 'vertical' | 'diagonal' | 'oval' | 'random'

rotation

Rotation or angle setting. Check block bounds and overlaps after rotating.

number

showArrow

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean

showStartArrow

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean

startArrowColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

startArrowFilled

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean

startArrowSize

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

startArrowStyle

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

'triangle' | 'triangle-reverse' | 'chevron' | 'diamond' | 'circle'

thickness

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number