# Implementing Custom Transitions From [*Svelte and Sapper in Action*](https://www.manning.com/books/svelte-and-sapper-in-action?utm_source=blog&utm_medium=organic&utm_campaign=book_volkmann_svelte_8_19_20&utm_content=devto) by Mark Volkmann ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gzu2oppmo0z9onkmv2an.jpg) This article walks through implementing custom transitions with Svelte and Sapper. Take 40% off [*Svelte and Sapper in Action*](https://www.manning.com/books/svelte-and-sapper-in-action?utm_source=blog&utm_medium=organic&utm_campaign=book_volkmann_svelte_8_19_20&utm_content=devto) by entering **fccvolkmann** into the discount code box at checkout at [manning.com](https://www.manning.com/?utm_source=blog&utm_medium=organic&utm_campaign=book_volkmann_svelte_8_19_20&utm_content=devto). 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 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ubo2op3hs0r0el7lug1o.jpg) Copy this code to the REPL to try it. Listing 1. src/App.svelte Springy

duration = {duration}

{#if show}

Take me for a spin!

{/if} ❶ 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](https://livebook.manning.com/book/svelte-and-sapper-in-action?origin=product-look-inside&utm_source=blog&utm_medium=organic&utm_campaign=book_volkmann_svelte_8_19_20&utm_content=devto).

mvolkmann

Implementing Svelte Custom Transitions

Join Our Newsletter. No Spam, Only the good stuff.