Stores and Animations

In this chapter, we will delve into the world of Svelte animations, focusing on the power and versatility of the tweened and spring stores. The tweened and spring stores are writable stores in which their store value changes over time when the set or update method is invoked, enabling us to develop more complex and visually appealing animations. By effectively harnessing these stores, you can elevate the user experience and create applications that are both dynamic and captivating.

We begin this chapter by delving into the tweened and spring stores, learning how to create animations using these stores. Following that, we explore interpolation and the use of custom interpolations. Throughout the chapter, we examine various examples, such as animated graphs and image lightboxes, to illustrate the concepts. By the end of this chapter, you will have acquired the skills necessary to harness the tweened and spring stores effectively, enabling you to create intricate...

Technical requirements

You can find the code used in this chapter on GitHub: https://github.com/PacktPublishing/Real-World-Svelte/tree/main/Chapter12

Introducing the tweened and spring stores

Let us begin our journey into the world of Svelte animations by understanding the concept of tweened and spring stores.

The tweened and spring stores are writable stores that typically hold numeric values. To see the features they offer, let us compare them with a regular numeric variable.

If you are not familiar with writable stores, you can check out Chapter 8, where we extensively explained Svelte stores and creating writable Svelte stores using the built-in writable() function.

Usually, when you have a numeric variable and you update the variable, the value of the variable changes instantly. In the following example, we have a numeric variable, height, whose initial value is 10. When we assign a new value of 20 to the variable, the value of the variable changes to 20 immediately:

let height = 10;
height = 20;

If we use this numeric variable to represent the height of an element or the progress in a progress bar, the height...

Examples – creating an animated graph with the tweened and spring stores

In this section, we will explore an example that demonstrates the power of the tweened and spring stores. We will create an animated bar chart where the bars dynamically resize to reflect updated data values. By adding animation to the bar chart, we can effectively highlight data changes and provide insights into complex datasets.

Firstly, let us create a bar chart component:

<script>
  let data = generateData(10);
  function generateData(length) {
    const result = new Array(length);
    for (let i = 0; i < length; i ++) {
      result[i] = Math.random() * 300;
    }
    return result;
  }
</script>
<style>
  .bar {
    background-color: steelblue;
    height: 50px;
  }
</style...

Creating custom tweened interpolators

Sometimes, you may want to transition between non-numeric values, such as colors. Fortunately, this doesn’t prevent us from using the tweened store. The tweened function offers an option to define custom interpolation between two values.

In this section, we’ll explore how to create a custom interpolation to smoothly transition between two colors.

But what is interpolation?

When transitioning between two values, interpolating means generating intermediate values between the values, to create a smooth transition.

For example, consider a tweened store initialized at 0, and we set it to 100. The tweened store generates intermediate values between 0 and 100, such as 20, 40, 60, and so on, while updating the store value with these intermediate values. As a result, during the transition from 0 to 100, the store value smoothly changes, providing a visually appealing progression from 0 to 100.

This process of generating intermediate...

Examples – creating an animated image preview

In this example, we’ll create an image preview feature that allows users to view a larger, more detailed version of a thumbnail image when they click on it, enhancing the user’s visual experience and allowing them to inspect images more closely.

While building this feature, you’ll see how we can utilize the spring store to create a more fluid and natural user experience, making the transitions between images and their larger previews feel smooth and engaging.

To begin, let’s create a list of images that will be displayed on our page:

<script>
  const images = [
    "path/to/image1.jpg",
    "path/to/image2.jpg",
    // ...more image paths
  ];
  const imgElements = [];
</script>
<div class="image-container">
  {#each images as image, index}
 ...

Summary

In this chapter, we looked at the tweened and spring stores from Svelte.

We explored how to use the tweened and spring stores to create smooth animations and transitions, enhancing the visual appeal and user experience. By working with custom interpolation functions and applying them to non-numeric values, such as colors, we’ve expanded the possibilities for creating dynamic and engaging user interface elements.

Throughout the chapter, we’ve seen multiple examples of the tweened and spring stores in action, seeing how easy it is to use the tweened and spring stores to create animations. Hopefully, you are now more comfortable using the tweened and spring stores in your Svelte projects.

This is our last chapter discussing Svelte context and Svelte stores. In the next chapter, we will look into transitions, namely, how to use transitions in our Svelte components.