Animating Value Changes with Svelte
Tags: svelte, webdev, programming, javascript
Published: 2021-01-28 21:42:00

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**


Svelte is an up and coming front end framework for developing front end web apps.

It’s simple to use and lets us create results fast.

In this article, we’ll look at how to create tweens to animate values in a Svelte component.

### Creating Animation for Value Changes with tween

We can use the `tweened` function to create a value that’s animated when we change it.

For instance, we can use it to create an animated progress bar which has an easing effect as follows:

```
<script>
  import { tweened } from "svelte/motion";
  import { cubicOut } from "svelte/easing";

  const progress = tweened(0, {
    duration: 400,
    easing: cubicOut
  });

  const moveProgress = () => {
    $progress = 0;
    const interval = setInterval(() => {
      $progress += 0.1;
      if ($progress === 1) {
        clearInterval(interval);
      }
    }, 1500);
  };
</script>

<style>
  progress {
    display: block;
    width: 100%;
  }
</style>

<progress value={$progress}></progress>
<br>
<button on:click="{moveProgress}">
  Start
</button>
```

In the code above, we have the `moveProgress` function, which sets the `$progress` store’s value.

Then we update it until it gets to 1. Once it’s 1, then we clear the timer object to stop it from running.

The `$progress` store is created from the `tweened` function, which enables us to animate as the value is being changed. It has the initial value of 0 as we passed 0 into the `tweened` function as the first argument.

The 2nd argument has the object to specify how the animation is done. We set the duration of the animation to 400ms. Then we set the easing function to cubic out.

Cubic out means that the animation moves fast and then slowly.

All options that are available in the object we pass into the 2nd argument are:

*   `delay` — milliseconds before the tween starts
*   `duration` — either the duration of the tween in milliseconds or a `(from, to) => milliseconds` function allowing us to specify the tween
*   `easing` — a `p => t` function
*   `interpolate` — a custom `(from, to) => t => value` function for interpolating between arbitrary values. Svelte interpolates between numbers, dates, and identically shaped arrays and objects by default

We can pass the options to the `progress.set` and `progress.update` as the second argument to override the defaults.

The `set` and `update` methods both return a promise that resolves when the tween completes.

### spring Function

We can use the `spring` function to create a store that has values that’s animated as they’re changed.

For instance, we can write the following code to add a spring effect to our square as we move it by hover the mouse on different location:

`App.svelte` :

```
<script>
  import { spring } from "svelte/motion";

  let coords = spring({ x: 50, y: 50 });
  let square;

  const setCoords = e => {
    coords.set({ x: e.clientX, y: e.clientY });
    square.style.top = `${$coords.y}px`;
    square.style.left = `${$coords.x}px`;
  };
</script>

<style>
  .screen {
    width: 100vw;
    height: 100vh;
  }

  .square {
    width: 20px;
    height: 20px;
    background-color: red;
    position: absolute;
  }
</style>

<div class="screen" on:mousemove="{setCoords}">
  <div class="square" bind:this={square}>
  </div>
</div>
```

In the code above, we bind the div with class `square` to the `square` variable.

Then we added a `setCoords` function to set the `coords` store with the `x` and `y` values of the mouse hover position.

We then used that to set the `top` and `left` values of the div with class square, which when combined with the existing styles, will move the square.

The `spring` function gives the square a springy effect as we move the red square around with the mouse.

If we switch between `spring` and `writable` , we’ll notice a difference in how the square moves.

### Conclusion

We can create animation from store states with the `tween` and `spring` functions.

Then `tween` function is good for values that change less frequently and `spring` is good for animations of values that change more frequently.