Implementing Svelte Custom Transitions

#svelte #animation

# Implementing Custom Transitions
From Svelte and Sapper in Action by Mark Volkmann

This article walks through implementing custom transitions with Svelte and Sapper.

Take 40% off Svelte and Sapper in Action by entering fccvolkmann into the discount code box at checkout at manning.com.

Implementing custom transitions is easy. The only thing required is to write a function that follows a few basic rules. The function should take two arguments, the DOM node to be transitioned and an options object. Examples of options include:

• delay - This is the number of milliseconds to wait before the transition begins.
• duration - This is the number of milliseconds over which the transition should occur.
• easing - This is an easing function that takes a value between zero and one, and returns a value in that same range.

Options which are specific to a given transition can also be provided. For example, the fly transition accepts x and y options.

The function must return an object whose properties include the transition options and a css method. The css method must return the appropriate CSS string for the number between zero and one which is returned by calling the easing function. Svelte takes care of honoring the delay and duration options.

The transition options returned can be given default values which are used when they aren’t passed to the custom function. For example, default values for duration and easing can be provided.

The css method has passed a time value between zero and one. It must return a string containing CSS properties to be applied to the DOM node for that time value. Examples of CSS properties which might vary over time include opacity, size, font size, position, rotation, and color.

Here’s an example of a custom transition. It animates the scale and rotation of an element to make it appear to spiral down a drain when removed from the DOM. We apply this to a div element containing the text "Take me for a spin!" sized to wrap to two lines. Press the "Toggle" button to toggle between hiding and showing the div element. Check the "Springy" checkbox to use the backInOut easing function instead of the linear easing function.

Figure 1. custom transition

Copy this code to the REPL to try it.
Listing 1. src/App.svelte

 <script>
  import {backInOut, linear} from 'svelte/easing';

  let springy = false;
  $: duration = springy ? 2000 : 1000;
  $: easing = springy ? backInOut : linear;
  $: options = {duration, easing, times: 2};

  let show = true;
  const toggle = () => show = !show;

  function spin(node, options) {
    const {easing, times = 1} = options;
    return {
      ...options,
      css(t) {                              1 
        const eased = easing(t);            2
        const degrees = 360 * times;        3
        return `transform: scale(${eased}) rotate(${eased * degrees}deg);`;
      }
    };
  }
</script>

<label>
  <input type="checkbox" bind:checked={springy} /> Springy
</label>
<div>duration = {duration}</div>
<button on:click={toggle}>Toggle</button>

{#if show}
  <div class="center" in:spin={options} out:spin={options}>        4
    <div class="content">Take me for a spin!</div>
  </div>
{/if}

<style>
  .center {                             5
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .content {
                                        6
    position: absolute;
    transform: translate(-50%, -50%);

    font-size: 64px;
    text-align: center;
    width: 300px;
  }
</style>

❶ The value of t passed to the css method varies between zero and one during an "in" transition and between one and zero during an "out" transition.
❷ Recall that easing functions return a value between zero and one inclusive.
❸ This is the degrees through which to spin.
❹ The reasons for using in and out instead of transition is explained in the book.
❺ This has a width and height of zero and it’s only used to center the content on the page.
❻ These CSS properties give rotation about the center.

If you want to learn more about the book, check it out on Manning’s liveBook platform here.