Animating Elements

A looping animation can convey flow, signal status, or draw the room's eye during a presentation. livediagram offers three flavours, each from the Animation category of the right-click menu, and each option shows an illustrated tile so you can see the motion before you apply it. On a desktop you can also hover a tile to preview the motion live on your selection — it plays right on the element so you can compare options, and a click locks it in (move off the tiles and it reverts).

Animating a shape

Right-click a boxed element (a shape, sticky, label, or image) and pick an Animation:

• Pulse sends an attention ring expanding out from the element.
• Blink gently breathes its opacity, the classic "status LED" when paired with a small coloured circle.
• Glow wraps it in a soft halo.
• Trace runs a light around its outline.
• Gradient drifts a moving gradient across its fill.
• Heartbeat double-pumps its size in a lub-dub rhythm, and Breathe swells it slowly and gently — both stay in place, ideal for emphasis without distraction.
• Shimmer catches the light with a quick occasional glint, and Highlight periodically brightens the fill in a luminous "look here" swell.
• Bounce bobs it up and down, and Wobble tilts it side to side.
• Shake jitters it quickly side to side, and Jelly squashes and stretches it.
• Float drifts it in a slow circle, and Swing rocks it like a pendulum from its top edge.

Flowing arrows

Select an arrow and pick a flow to show direction along its path: Dashes march along the line, Dots and Beads travel it, Pulse breathes its opacity, Grow breathes its thickness, and Glow pulses a soft halo. There's also Draw (the line repeatedly draws itself on from start to end), Comet (a glowing dot trails a fading tail along the path), Rainbow (the colour cycles through the spectrum), Strobe (a hard on/off blink), and Wind (fast speed-line dashes). For quieter emphasis, Heartbeat double-pumps the line's thickness, Breathe swells it slowly, Shimmer glints occasionally, and Signal sends a single discrete packet along the path, one message at a time. Flow is ideal for data and process diagrams where you want to show which way things move.

Animating an icon

Any icon can loop a glyph animation chosen from its menu: Spin, Beat, Pulse, Glow, Ping, Breathe, Shimmer, Bounce, Wiggle, Flash, Tada, Flip, Jump, Swing, or Float. A spinning gear or a beating heart adds life without a separate element; Glow, Ping, Breathe, and Shimmer emphasise an icon in place without moving it.

Speed

Once you've picked any animation, a Speed row appears with Slowest, Slow, Normal, and Fast. It scales the timing while keeping each animation's character. New animations start at Slow, the calm default; step up to Normal or Fast for more urgency, or down to Slowest for the gentlest loop.

Repeat

Below Speed sits a Repeat switch, on by default. Leave it on and the animation loops for as long as the diagram is open; turn it off and the animation plays a single cycle and then rests, a one-time flourish rather than a loop. It's available on every animation: shapes, arrows, and icons alike.

How animations behave

• Subtle by design. They loop quietly so a diagram stays readable rather than busy.
• Shared with collaborators. Everyone in a live session sees the same loop; nothing is broadcast frame by frame.
• Reduced-motion safe. If your system asks for reduced motion, animations freeze to a tidy still frame.
• Frozen on export. PNG and SVG exports capture a static frame.
• Copied by the format painter. Animation is a cosmetic property, so the format painter carries it to other elements.