Svelte Transitions

Written 2021-01-27 — Updated 2023-02-10

Useful Transitions

Slide in from the side

function horzSlideTransition(node, { duration }) {
  return {
    duration,
    css: (t) => {
 // This always slides in from the right.
 const eased = 1 - cubicOut(t);
 return `transform: translateX(${eased * 100}%)`;
    },
  };
}

Deferred Transitions
- These can be useful for more advanced cases.
- They feel complicated, but basically your transition function does some initialization and then returns another function.
  - Svelte will call that function only once all other elements starting a transition at the same time have run their initialization.
  - This lets you set up some shared state between multiple transitioning elements.
    - Important caveat: Elements that are transitioning but not in the same component may not always transition on the same tick.
- crossfade is the deferred transition that comes with the Svelte library.
- svelte-zoomable uses these extensively to coordinate multiple elements.