Motion

import { createSpring, createTweened } from 'solivelte';

createSpring

The createSpring function creates a signal whose value is animated, with a motion that simulates the behavior of a spring. This means when the value changes, instead of transitioning at a steady rate, it “bounces” like a spring would, depending on the physics parameters provided. This adds a level of realism to the transitions and can enhance the user experience.

function createSpring<T>(
  value: T,
  options?: SpringOptions
): Spring<T>;

createTweened

The createTweened function creates a signal that provides smooth transitions between state values over time.

function createTweened<T>(
  value: T,
  options?: TweenedOptions
): Tweened<T>;

Spring

type Spring<T> = [get: Accessor<T>, set: SpringSetter<T>];

SpringSetter

type SpringSetter<T> = (
  newValue: T | ((prev: T) => T),
  opts?: SpringSetterOptions
) => Promise<void>;

SpringSetterOptions

interface SpringSetterOptions {…}

hard?: any;

soft?: string | number | boolean;

SpringOptions

interface SpringOptions {…}

stiffness?: number;

damping?: number;

precision?: number;

Tweened

type Tweened<T> = [get: Accessor<T>, set: TweenedSetter<T>];

TweenedSetter

type TweenedSetter<T> = (
  newValue: T | ((prev: T) => T),
  opts?: TweenedOptions<T>
) => Promise<void>;

TweenedOptions

interface TweenedOptions<T> {…}

delay?: number;

duration?: number | ((from: T, to: T) => number);

easing?: (t: number) => number;

interpolate?: (a: T, b: T) => (t: number) => T;