Springs

The createSpring function is an alternative to createTweened that often works better for values that are frequently changing.

In this example we have two springs — one representing the circle’s coordinates, and one representing its size.

import { createSpring } from "solivelte";

const [coords, setCoords] = createSpring({ x: 50, y: 50 });
const [size, setSize] = createSpring(10);

Both springs have default stiffness and damping values, which control the spring’s, well… springiness. We can specify our own initial values:

const [coords, setCoords] = createSpring(
  { x: 50, y: 50 },
  {
    stiffness: 0.1,
    damping: 0.25,
  }
);

Preview

Code

import type { Component } from "solid-js";
import { createSpring } from "solivelte";

export const SpringExample: Component = () => {
  let ref: HTMLElement;
  const [size, setSize] = createSpring(10);
  const [coords, setCoords] = createSpring(
    { x: 50, y: 50 },
    {
      stiffness: 0.1,
      damping: 0.25,
    }
  );

  return (
    <div ref={(el) => (ref = el)}>
      <svg
        onPointerMove={(e) => {
          setCoords({
            x: e.clientX - ref!.getBoundingClientRect().left,
            y: e.clientY - ref!.getBoundingClientRect().top,
          });
        }}
        onPointerDown={() => setSize(30)}
        onPointerUp={() => setSize(10)}
        role="presentation"
      >
        <circle
          cx={coords().x}
          cy={coords().y}
          r={size()}
        />
      </svg>
    </div>
  );
};