What are transitions and animations in Svelte?

Transitions and animations can improve user experience while surfing the web. Svelte will help you easily combine these two elements. Below are detailed instructions.

What are transitions and animations in Svelte? Picture 1

Set up the Svelte project

To get up and running with Svelte, you need to ensure that the Node.js runtime and Node Package Manager (NPM) are properly installed on your computer. Open terminal and run the following command:

/svelte-transition-animation/

This will create a new Vite.js project. Name the project, choose Svelte as the framework, and set the variables to JavaScript. Then switch to the project directory and run the following command to install the necessary dependencies:

npm install

Remove boilerplate code by deleting the assets and lib folders and the contents of the App.svelte and App.css files .

How to use Tweening in Svelte

Tweening is a technique in animation and computer graphics that creates intermediate frames between main frames to create smooth and realistic movements or transitions. Svelte provides a tweened widget , which allows you to animate elements with numeric values, making it simple to create smooth transitions and animations in your web application.

 The tweened widget is part of the svelte/motion module . To use tweened in your component, you must import it like this:

import { tweened } from 'svelte/motion'

Inside, the tweened widget is just a writeable Svelte store. Essentially, a Svelte store is a JavaScript object that you can use to handle state management. The tweened store has two named methods: set and update . At a basic level, the syntax for a tweened store looks like this:

const y = tweened(defaultValue, { duration: [time-in-milliseconds], easing: [easing-function], })

The above code block defines a variable y and binds it to a tweened store. In this store, you have two parameters. The first represents the default value that the y -link should have. Next is the object with two keys duration and easing . Duration defines how long the tween lasts in milliseconds, while easing defines the acceleration function.

The acceleration functions in Svelte determine the behavior of the tween. These functions are part of the svelte/easing module . That means you have to import a specific function from the module before you can pass it to the tweened store. Svelte has an easing visualization tool that you can use to explore the behavior of different acceleration functions.

To fully illustrate how you can use the tweened widget, here's an example that uses the tweened store to increase the size of an element in Svelte.

 (size.update(()=>$size+3))}>Increase size 

The above code block imports two functions: tweened and bounceOut from the svelte/motion and svelte/easing modules respectively. Next, there is a constant variable associated with store tweened . This store has a default value of 0. The default value can be accessed using the $ symbol . The next parameter in the tweened function is an object with the easing key pointing to the bounceOut acceleration function .

 In the markup, the button component has an on:click directive that calls the update method on the size link . This method increases the store $size value by 3 any time you click the button. The div element has an inline style that depends on the store $size value . When you run this code in the browser, this is the result you will see:

What are transitions and animations in Svelte? Picture 2

Transitions in Svelte

To transition elements in and out of the Document Object Model (DOM), Svelte has a transition command and a module named svelte/transition that exports useful functions for you to use with the transition command . For example, to blur an element in and out of the DOM, first import the blur function from svelte/transition :

Then add functionality to dock and undock an element from the DOM. In the script tag, create the visible variable and set it to false .

Next use if-block to show the conditional div . Make sure you add a transition directive on the div and set it to blur .

{#if visible} Here I am. {/if}

Then add a button to show or hide the div .

visible=!visible}> {visible ? "Hide" : "Show"} 

When you run this code in your browser, you will see:

What are transitions and animations in Svelte? Picture 3

The svelte/transition module exports 7 named functions: fade, blur, fly, slide, scale, draw and crossfade . Transitions in Svelte can accept parameters. For example, the blur function from the original example could accept the following parameters: delay, duration, easing, opacity and amount .

In addition to transition parameters, Svelte also provides in and out transitions giving you greater control over component transitions. Looking at the last example, what happens if you want the element's input transition to be blur , and the output transition to slide ? Here's how you do it:

 {#if visible} Here I am. {/if} visible=!visible}> {visible ? "Hide" : "Show"} 

In the code block above, notice that there is no transition statement on the div element . Instead, the transition command has been replaced with in and out , which point to blur and slide respectively .

What are transitions and animations in Svelte? Picture 4

Animation effects for Svelte elements

The most convenient way to animate components in Svelte is by using the flip function from svelte/animate . Flip is the abbreviation for "First, Last, Invert, Play". It accepts 3 parameters: delay, duration and easing . Look at the following code:

 {#each shoppingList as item (item)} {@const number = shoppingList.indexOf(item)} {number + 1}. {item} {/each}  shoppingList = shoppingList.sort()}>Arrange  shoppingList = [.originalList]}>Reset

This code block illustrates how you can use the animate command in Svelte. In the script tag, the first line imports the flip function. Here there are two arrays: originalList and shoppingList . In the 'container' div , the keyed-each block is responsible for displaying each element in the shoppingList array.

The child div of the 'container" div has an animate directive that points to the flip function. Pressing the first button sorts the list alphabetically, while pressing the second button resets the list. Running this code in the browser , this is what you will see:

What are transitions and animations in Svelte? Picture 5

Above is everything you need to know about transitions and animating in Svelte . Hope the article is useful to you.

Micah Soto

Update 13 October 2023