Tweened values

Let’s start by creating a tweened signal:

import { createTweened } from "solivelte";

const [progress, setProgress] = createTweened(0);

Clicking the buttons causes the progress bar to animate to its new value. It’s a bit robotic and unsatisfying though. We need to add an easing function:

import { createTweened, cubicOut } from "solivelte";

const [progress, setProgress] = createTweened(0, {
  duration: 400,
  easing: cubicOut,
});

The full set of options available to createTweened:

• delay — milliseconds before the tween starts.
• duration — either the duration of the tween in milliseconds, or a (from, to) => milliseconds function allowing you to (e.g.) specify longer tweens for larger changes in value.
• easing — a p => t function.
• interpolate — a custom (from, to) => t => value function for interpolating between arbitrary values. By default, Solivelte will interpolate between numbers, dates, and identically-shaped arrays and objects (as long as they only contain numbers and dates or other valid arrays and objects). If you want to interpolate (for example) color strings or transformation matrices, supply a custom interpolator.

Preview

0%25%50%75%100%

Code

import type { Component } from "solid-js";
import { createTweened, cubicOut } from "solivelte";

export const TweenedExample: Component = () => {
  const [progress, setProgress] = createTweened(0, {
    duration: 400,
    easing: cubicOut,
  });

  return (
    <>
      <progress value={progress()}></progress>
      <button onClick={() => setProgress(0)}>0%</button>
      <button onClick={() => setProgress(0.25)}>25%</button>
      <button onClick={() => setProgress(0.5)}>50%</button>
      <button onClick={() => setProgress(0.75)}>75%</button>
      <button onClick={() => setProgress(1)}>100%</button>
    </>
  );
};