Sveltejs Academy · Lesson

Writing a Custom Transition Function

Return CSS or tick functions from a custom transition to animate DOM entry/exit.

Custom Transitions

Beyond built-ins, you can write fully custom transition functions.

A transition function takes (node, params) and returns an options object.

function spin(node) {
  return {
    duration: 600,
    css: (t) => `transform: rotate(${t * 360}deg); opacity: ${t};`
  };
}