Making Your First Custom Svelte Transition | CSS-Tricks

The Sfleet transition The API provides a first-class way to animate your components as they enter or leave the document, including custom Svelte transitions. by default, transition The directive uses CSS animation, which generally offers better performance and allows the browser’s main thread to remain unblocked. The API is simple like this: <element transition:transitionFunction />. You can also select in or out Directives that are one-way transitions, only work when the component is installed or Not upward.

Animated example of a custom Svelte transition showing a task list.  An item is typed and moved in the item list when it is entered.  Clicking the Done button moves the item out of view.
Example of a working Svelte transition (go to demo)

Svelte offers uptime svelte/transition The package that comes with seven Svelte transmission functions pre-packaged, all of which can be dropped and modified to your heart’s desire. pair this with svelte/easing The package, allows for a wide range of interactions, without writing any of the jump code yourself. Play with the different transitions and facilitation functions to get a feel of what’s possible.

Looking for instructions on how to get started with Svelte? We have a solid overview for you to take.

Svelte Custom Transition API

If you need more control than what the Svelte Transition API offers out of the box, Svelte allows you to define your own custom transfer function, as long as you stick to some convention. From the docs, here’s what the custom transfer API looks like:

transition = (node: HTMLElement, params: any) => {
  delay?: number,
  duration?: number,
  easing?: (t: number) => number,
  css?: (t: number, u: number) => string,
  tick?: (t: number, u: number) => void
} 

Let’s break it down. The move function takes a reference to the DOM node where the file . is transition The directive is used and returns an object with some parameters that control the animation, most importantly, a css or tick Job.

the css The job of the function is to return a string of CSS describing the animation, usually including some kind of change or opacity change. Alternatively, you can choose to return a file tick function, which allows you to control every aspect of animation using the power of JavaScript, but it pays a performance penalty because this type of transition doesn’t use CSS animation.

no css And tick Functions that take two parameters are called (t, u) by persuasion. t It is a decimal number to move from 0.00 to 1.00 While the element is entering the DOM and from 1.00 Refer to the 0.00 when the item leaves. the u The parameter is the inverse t or 1 - t at any moment. For example, if you return a string of transform: scale(${t}), the item will be moved smoothly from 0 to 1 upon entry and vice versa upon exit.

These concepts may seem a bit abstract, so let’s fix it by building our own custom Svelte Transmission!

BUILD YOUR FIRST CUSTOM Svelte TRANSMISSION

First, let’s set up some modular models that allow us to toggle the presence of an element in the DOM using Svelte #if to forbid. Remember that Svelte transitions only work when the element leaves or enters the DOM.

<script>
  let showing = true
</script>

<label for="showing">
  Showing
</label>
<input id="showing" type="checkbox" bind:checked={showing} />

{#if showing}
  <h1>Hello custom transition!</h1>
{/if}

You should be able to toggle the checkbox and see our element blatantly appear and disappear where it is.

Next, let’s set up our custom Svelte transition function and plug it into our element.

<script>
  let showing = true
  // Custom transition function
  function whoosh(node) {
    console.log(node)
  }
</script>

<label for="showing">
  Showing
</label>
<input id="showing" type="checkbox" bind:checked={showing} />

{#if showing}
  <h1 transition:whoosh>Hello custom transition!</h1>
{/if}

Now, if you toggle the checkbox, you will see File <h1> An item registered in the console. This proves that our custom transition is connected correctly! We won’t actually be using a DOM node in our example, but it’s often useful to access the element to indicate its current styles or dimensions.

For our element to do any animation at all, we need to return an object containing a file css (or tick) Job. Let’s have a css The function returns a single line of CSS that measures our element. We will also return a file duration The property that controls the time an animation takes.

<script>
  function swoop() {
    return {
      duration: 1000,
      css: () => `transform: scale(.5)`
    }
  }
  let showing = true
</script>

<!-- markup -->

We have something moving! You will notice that our element jumps straight to .5 Scale when toggling the check box. That’s one thing, but he’d feel a lot better if it was smoothly he moved. This is where (t, u) Parameters come.

<script>
  function swoop() {
    return {
      duration: 1000,
      css: 
    }
  }
  let showing = true
</script>

<!-- markup -->

Now we’re talking! remember, t Rolls smoothly from 0.00 to 1.00 When an item enters, and vice versa when it leaves. This allows us to achieve the smooth effect we want. In fact, what we just wrote is basically inline scale Transition from svelte/transition Package.

Let’s be a little fancier. To live up to our custom Svelte transmission, swoop, let’s add translateX Elena transform, so that our element zooms in and out from the side.

I want to challenge you to try the implementation first before we continue. Trust me, it will be fun! Suppose we want to translate to 100% when leaving the element and back to 0% when entering it.

[waiting…]

How did it go? Do you want to compare the answers?

This is what I got:

css: (t, u) => `transform: scale(${t}) translateX(${u * 100}%);`

It’s okay if you have something different! Let me break down what I did.

The main thing here is to use the second operand in a file css Job. If we think about our animation as the item enters the screen, we want it end up in a scale(1) translateX(0%), so we can use unchanged t For each of the scale and the transform. This is the comfort behind u Parameter – is inverse t Any moment, so we know it will be 0 When t is being 1! then doubled u by 100 to get the percentage value and pin it to % Finally signed.

Learn the interaction between t And u It is an important piece of the custom transition puzzle in Svelte. These two parameters allow a world of dynamism for your animation; It can be divided, doubled, twisted or skewed depending on your needs.

Let’s slap my favorite svelte/easing It works on our transition and we call it a day:

<script>
  import { elasticOut } from 'svelte/easing'
  function swoop() {
    return {
      duration: 1000,
      easing: elasticOut,
      css: (t, u) => `transform: scale(${t}) translateX(${u * 100}%)`
    }
  }
  let showing = true
</script>

<label for="showing">
  Showing
</label>
<input id="showing" type="checkbox" bind:checked={showing} />

{#if showing}
  <h1 transition:swoop>Hello custom transition!</h1>
{/if}

wrapping

our end! You can now create a custom Svelte transition job. We’ve only scratched the surface of what’s possible but I hope you feel equipped with the tools to explore more. I highly recommend reading the docs and going through the official tutorial to gain more familiarity.

Leave a Comment