Bindings, Actions & Transitions

Connecting components to the DOM and to motion

Runes give you reactive state; this module covers the directives that connect that state to real DOM elements and to visual motion:

• Bindings (bind:) create a two-way link between state and a DOM property — the input updates the state, and the state updates the input.
• Attachments and actions — {@attach} (Svelte 5.29+) runs imperative setup on an element or component and re-runs when its inputs change; use: actions are the legacy form for libraries that still ship them. The escape hatch for third-party libraries, focus, tooltips, and click-outside.
• Transitions & animations (transition:, animate:) declaratively animate elements as they enter, leave, and reorder.

What this module covers

Lesson	What you’ll learn
Bindings	bind:value, bind:this, bind:group, and component bindings
Actions	Attachments ({@attach}) first, then the legacy use: directive and fromAction
Transitions & animations	transition:/in:/out: and animate:flip
Forms & inputs	Controlled inputs, validation, and submit handling

flowchart TB
  state["reactive state (runes)"] --> bind["bind: two-way link to DOM props"]
  state --> action["use: imperative setup on an element"]
  state --> trans["transition: / animate: declarative motion"]
  bind --> dom["the DOM"]
  action --> dom
  trans --> dom

Three ways Svelte reaches the DOM

🧡 The one-line takeaway

This module covers the directives that link reactive state to the DOM: bind: for two-way data flow, use: actions for imperative element setup (third-party libs, focus, click-outside), and transition:/animate: for declarative enter/leave/reorder motion. Together they’re how Svelte components meet real elements and visual polish.

What does a bind: directive create?

A one-way render A two-way link between state and a DOM property (the element updates state, state updates the element) A CSS animation A network request

What is a use: action for?

Styling an element Running imperative setup code on an element when it mounts — for third-party libraries, focus, tooltips, etc. Defining a route Creating a store

What do transition: and animate: directives do?

Fetch data Declaratively animate elements as they enter, leave, and reorder Validate forms Bind inputs

Submit

Mark as complete