Transitions

This example shows how to use Svelte’s built-in transitions to animate creating and removing nodes and edges. Since nodes and edges are rendered as normal DOM elements, you can apply any Svelte transition to them.
Note that you need to use the |global modifier with your transitions for them to work properly within Svelte Flow’s component structure.

/* xyflow theme files. Delete these to start from our base */
 
.svelte-flow {
  --xy-background-color: #f7f9fb;
  /* Custom Variables */
  --xy-theme-selected: #ff4000;
  --xy-theme-hover: #c5c5c5;
  --xy-theme-edge-hover: black;
  --xy-theme-color-focus: #e8e8e8;
 
  /* Built-in Variables see https://svelteflow.dev/learn/customization/theming */
  --xy-node-border-default: 1px solid #ededed;
 
  --xy-node-boxshadow-default: 0px 3.54px 4.55px 0px #00000005, 0px 3.54px 4.55px 0px #0000000d, 0px 0.51px 1.01px 0px #0000001a;
 
  --xy-node-border-radius-default: 8px;
 
  --xy-handle-background-color-default: #ffffff;
  --xy-handle-border-color-default: #aaaaaa;
 
  --xy-edge-label-color-default: #505050;
 
  --xy-resize-background-color-default: #9e86ed;
  --xy-node-background-color-default: #ffffff;
  --xy-theme-panel-bg: #ffffff;
  --xy-theme-panel-text: #111827;
  --xy-theme-resize-handle-bg: #ffffff;
  --xy-theme-focus-border: #d9d9d9;
  --xy-theme-muted-bg: #f3f4f6;
  --xy-theme-subtle-border: #d1d5db;
}
 
.svelte-flow.dark {
  --xy-background-color: #101012;
  --xy-node-background-color-default: #1a1b1e;
  --xy-node-border-default: 1px solid #303238;
  --xy-handle-background-color-default: #141519;
  --xy-handle-border-color-default: #5a5d66;
  --xy-edge-label-color-default: #e6e7ea;
  --xy-theme-hover: #7a7d86;
  --xy-theme-edge-hover: #f3f4f6;
  --xy-theme-panel-bg: #141519;
  --xy-theme-panel-text: #f3f4f6;
  --xy-theme-resize-handle-bg: #141519;
  --xy-theme-focus-border: #5f6470;
  --xy-theme-muted-bg: #24262c;
  --xy-theme-subtle-border: #3f434c;
  --xy-node-boxshadow-default: none;
  --xy-theme-color-focus: #4b4e57;
  --color-background: #1a1b1e;
  --color-hover-bg: #24262c;
  --color-disabled: #8b9099;
}
 
.svelte-flow {
  background-color: var(--xy-background-color);
}
 
/* Customizing Default Theming */
 
.svelte-flow__node {
  box-shadow: var(--xy-node-boxshadow-default);
  border-radius: var(--xy-node-border-radius-default);
  background-color: var(--xy-node-background-color-default);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px;
  font-size: 12px;
  flex-direction: column;
  border: var(--xy-node-border-default);
  color: var(--xy-node-color, var(--xy-node-color-default));
}
 
.svelte-flow__node.selectable:focus {
  box-shadow: 0px 0px 0px 4px var(--xy-theme-color-focus);
  border-color: var(--xy-theme-focus-border);
}
 
.svelte-flow__node.selectable:focus:active {
  box-shadow: var(--xy-node-boxshadow-default);
}
 
.svelte-flow__node.selectable:hover,
.svelte-flow__node.draggable:hover {
  border-color: var(--xy-theme-hover);
}
 
.svelte-flow__node.selectable.selected {
  border-color: var(--xy-theme-selected);
  box-shadow: var(--xy-node-boxshadow-default);
}
 
.svelte-flow__node-group {
  background-color: rgba(207, 182, 255, 0.4);
  border-color: #9e86ed;
}
 
.svelte-flow.dark .svelte-flow__node-group {
  background-color: rgba(123, 107, 148, 0.22);
  border-color: #7b6b94;
}
 
.svelte-flow__edge.selectable:hover .svelte-flow__edge-path,
.svelte-flow__edge.selectable.selected .svelte-flow__edge-path {
  stroke: var(--xy-theme-edge-hover);
}
 
.svelte-flow__handle {
  background-color: var(--xy-handle-background-color-default);
}
 
.svelte-flow__handle.connectionindicator:hover {
  pointer-events: all;
  border-color: var(--xy-theme-edge-hover);
  background-color: var(--xy-handle-background-color-default);
}
 
.svelte-flow__handle.connectionindicator:focus,
.svelte-flow__handle.connectingfrom,
.svelte-flow__handle.connectingto {
  border-color: var(--xy-theme-edge-hover);
}
 
.svelte-flow__node:has(.svelte-flow__resize-control.line) {
  border-radius: 0;
}
 
.svelte-flow__resize-control.handle {
  background-color: var(--xy-theme-resize-handle-bg);
  border: none;
  border-radius: 0;
  width: 5px;
  height: 5px;
}
 
.svelte-flow__edge-label {
  background: var(--xy-background-color);
  color: var(--xy-edge-label-color-default);
}
 
/* 
  Custom Example CSS  - This CSS is to improve the example experience.
  You can remove it if you want to use the default styles.
 
  New Theme Classes:
    .xy-theme__button   - Styles for buttons.
    .xy-theme__input    - Styles for text inputs.
    .xy-theme__checkbox - Styles for checkboxes.
    .xy-theme__select   - Styles for dropdown selects.
    .xy-theme__label    - Styles for labels.
  
  Use these classes to apply consistent theming across your components.
*/
 
:root {
  --color-primary: #ff4000;
  --color-background: #fefefe;
  --color-hover-bg: #f6f6f6;
  --color-disabled: #76797e;
}
 
/* Custom Button Styling */
.xy-theme__button-group {
  display: flex;
  align-items: center;
 
  .xy-theme__button:first-child {
    border-radius: 100px 0 0 100px;
  }
 
  .xy-theme__button:last-child {
    border-radius: 0 100px 100px 0;
    margin: 0;
  }
}
 
.xy-theme__button {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  padding: 0 1rem;
  border-radius: 100px;
  border: 1px solid var(--color-primary);
  background-color: var(--color-background);
  color: var(--color-primary);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
  box-shadow: var(--xy-node-boxshadow-default);
}
 
.xy-theme__button.active {
  background-color: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}
 
.xy-theme__button.active:hover,
.xy-theme__button.active:active {
  background-color: var(--color-primary);
  opacity: 0.9;
}
 
.xy-theme__button:hover {
  background-color: var(--xy-controls-button-background-color-hover-default);
}
 
.xy-theme__button:active {
  background-color: var(--color-hover-bg);
}
 
.xy-theme__button:disabled {
  color: var(--color-disabled);
  opacity: 0.8;
  cursor: not-allowed;
  border: 1px solid var(--color-disabled);
}
 
.xy-theme__button > span {
  margin-right: 0.2rem;
}
 
/* Add gap between adjacent buttons */
.xy-theme__button + .xy-theme__button {
  margin-left: 0.3rem;
}
 
/* Example Input Styling */
.xy-theme__input {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-primary);
  border-radius: 7px;
  background-color: var(--color-background);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
  font-size: 1rem;
  color: var(--xy-theme-panel-text);
}
 
.xy-theme__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(255, 0, 115, 0.3);
}
 
/* Specific Checkbox Styling */
.xy-theme__checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 7px;
  border: 2px solid var(--color-primary);
  background-color: var(--color-background);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5rem;
}
 
.xy-theme__checkbox:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
 
.xy-theme__checkbox:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 0, 115, 0.3);
}
 
/* Dropdown Styling */
.xy-theme__select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-primary);
  border-radius: 50px;
  background-color: var(--color-background);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
  font-size: 1rem;
  color: var(--xy-theme-panel-text);
  margin-right: 0.5rem;
  box-shadow: var(--xy-node-boxshadow-default);
}
 
.xy-theme__select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(255, 0, 115, 0.3);
}
 
.xy-theme__label {
  margin-top: 10px;
  margin-bottom: 3px;
  display: inline-block;
  color: var(--xy-theme-panel-text);
}