Svelte Transitions

Written 2021-01-27

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.

Thanks for reading! If you have any questions or comments, please send me a note on Twitter. And if you enjoyed this, I also have a newsletter where I send out interesting things I read and the occasional nature photo.