Animations & Easing

Control animation timing with 30+ easing functions.

Basic Animation

live live example

graph LR A[Start] --> B[Process] --> C[End]

<script type="module">
  import { createFlowPlayer } from 'https://cdn.jsdelivr.net/npm/mermaid-flow-player@latest/index.js';

  const player = createFlowPlayer({ root: document.getElementById('diagram') });
  await player.ready();
  await player.play(player.path('A', 'B', 'C'), { speed: 1.2 });
</script>

Web Component:

<script src="https://cdn.jsdelivr.net/npm/mermaid-flow-player@latest/mermaid-flow-player.element.js"></script>

<mermaid-flow-player controls speed="0.8" theme="light">
graph LR
  A[Start] --> B[Process] --> C[End]
</mermaid-flow-player>

Easing Functions

Standard CSS

• linear — Constant speed
• ease — Default browser easing
• ease-in — Starts slow, accelerates
• ease-out — Starts fast, decelerates
• ease-in-out — Slow start and end

Back (Overshoot)

live live example

graph LR A[Bounce] --> B[Back] --> C[Effect]

Overshoots the target then settles back:

player.play(scenario, { easing: 'ease-out-back' });

• ease-in-back, ease-out-back, ease-in-out-back

Elastic (Bouncy)

Spring-like oscillation:

player.play(scenario, { easing: 'ease-out-elastic' });

• ease-in-elastic, ease-out-elastic, ease-in-out-elastic

Bounce

Simulates a bouncing ball:

player.play(scenario, { easing: 'ease-out-bounce' });

• ease-in-bounce, ease-out-bounce, ease-in-out-bounce

Power Curves

Progressive acceleration/deceleration:

Family	In	Out	In-Out
Sine	ease-in-sine	ease-out-sine	ease-in-out-sine
Cubic	ease-in-cubic	ease-out-cubic	ease-in-out-cubic
Quart	ease-in-quart	ease-out-quart	ease-in-out-quart
Quint	ease-in-quint	ease-out-quint	ease-in-out-quint
Expo	ease-in-expo	ease-out-expo	ease-in-out-expo
Circ	ease-in-circ	ease-out-circ	ease-in-out-circ

Custom Cubic Bezier

Define your own curve:

player.play(scenario, { easing: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)' });

Configuration Levels

1. Global Default

Applied to all animations:

<script type="module">
  import { createFlowPlayer } from 'https://cdn.jsdelivr.net/npm/mermaid-flow-player@latest/index.js';

  const player = createFlowPlayer({
    root: document.getElementById('diagram'),
    easing: { default: 'ease-out-cubic' }
  });
</script>

2. Per-State

Different easing for each state:

const player = createFlowPlayer({
  root,
  easing: {
    default: 'ease-out',
    active: 'ease-out-back',
    success: 'ease-out-bounce',
    error: 'ease-in-out-elastic'
  }
});

3. Per-Step

Override for specific steps in a scenario:

const scenario = [
  { type: 'node', id: 'A', easing: 'ease-out-bounce' },
  { type: 'node', id: 'B', easing: 'ease-in-out-back' },
  { type: 'node', id: 'C' }  // Uses global default
];

Speed Control

Control playback speed with a multiplier:

// Slower (half speed)
await player.play(scenario, { speed: 0.5 });

// Normal
await player.play(scenario, { speed: 1.0 });

// Faster
await player.play(scenario, { speed: 2.0 });

Or set the step duration directly:

const player = createFlowPlayer({
  root,
  timing: { stepMs: 800 }  // 800ms per step
});

Complete CDN Example

<script type="module">
  import { createFlowPlayer } from 'https://cdn.jsdelivr.net/npm/mermaid-flow-player@latest/index.js';

  const player = createFlowPlayer({
    root: document.getElementById('diagram'),
    easing: {
      default: 'ease-out-cubic',
      active: 'ease-out-back',
      success: 'ease-out-bounce'
    },
    timing: { stepMs: 600 }
  });

  await player.ready();
  await player.play([
    { type: 'node', id: 'A', state: 'active', easing: 'ease-out-elastic' },
    { type: 'node', id: 'B', state: 'active' },
    { type: 'node', id: 'C', state: 'success', easing: 'ease-out-bounce' },
  ], { speed: 1.5 });
</script>