Svelte Transitions

Written
  • 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 write about tech thoughts, interesting things I've read, and project updates each Thursday.

You can check out a recent issue, or enter your email below to subscribe.