Svelte - Svelte Motions

Quiz

Motions in Svelte refer to the animations and transitions that can be applied to elements within a Svelte application. They enhance user experience by making interfaces more dynamic and visually appealing.

What are Tweens?

Tweens are animations that let a value change smoothly from one state to another over a set amount of time. In Svelte, they improve user interfaces by giving visual feedback when values change.

Creating a Tween

To create a tweened motion for your svelte project you can follow the steps mentioned below:

Import the Tween Class: First, import the Tween class from svelte/motion.

<script>
import { Tween } from 'svelte/motion';
</script>

Instantiate a Tween: Create an instance of the Tween class by giving it an initial value.

<script>
import { Tween } from 'svelte/motion';

// Create a tween instance with an initial value of 0
const tween = new Tween(0);
</script>

Key Properties of Tween

Target: This is a property you can change to show where you want the animation to move.
current: This is a read-only property that shows you the current animated value.

Additional Options

When creating a tween, you can also specify options like:

duration: How long the animation lasts (in milliseconds).
easing: A function that defines how the animation progresses (e.g., linear, ease-in-out).
delay: Time before starting the animation.

What is a Spring?

A spring in svelte is a type of animation that acts like a real spring. It is great for values that change often because it creates a smoother and more natural movement than regular animations.

Creating a Spring

To create a spring motion for your svelte project you can follow the steps mentioned below:

Import the Spring Function: First, import the spring function from svelte/motion.

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

Instantiate a Spring: Creating a spring using the spring function and giving it an initial value and optional parameters for customization. For example:

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

// Create a spring with an initial value of 0
const mySpring = spring(0, {
    stiffness: 0.1,  // Controls how stiff the spring is
    damping: 0.25    // Controls how quickly the spring settles
});
</script>

Example

This example shows how to use Svelte's tween class to animate a box's position in response to button clicks.

<!--src/store.js-->
import { tweened } from 'svelte/motion';
import { cubicOut } from 'svelte/easing';

// Create a tweened store for the position
export const position = tweened(0, {
    duration: 500,
    easing: cubicOut
});

<!-- src/App.svelte -->
<script>
    import { position } from './store.js';

    function moveBox() {
    position.set(Math.random() * 300); // Move to a random position between 0 and 300
    }
</script>

<style>
    .box {
    width: 50px;
    height: 50px;
    background-color: lightgreen;
    position: relative;
        margin-bottom:10px;
    }
</style>

<main>
    <h1>Tween Motion Example</h1>
    <div class="box" style="left: {$position}px;"></div> <!-- Use inline style for left position -->
    <button on:click={moveBox}>Move Box</button>
</main>

Output

Print Page