Skip to Content
DocsGetting Started

Getting Started

This page walks you through installing sprungdesign and running your first spring — both in React and in plain JavaScript.

Requirements

  • Node.js 18 or later
  • A package manager (npm, pnpm, yarn, or bun)
  • React 17+ — only if you use the sprungdesign/react adapter (it’s an optional peer dependency)

Installation

npm install sprungdesign

The package ships its own TypeScript types — there’s no @types/sprungdesign to install.

Your first spring (React)

useSpring(target, config?) returns a number that springs toward target whenever it changes. It starts at the target on mount (no entrance animation), then animates on every subsequent change.

import { useState } from "react";
import { useSpring } from "sprungdesign/react";
 
export function Toggle() {
  const [open, setOpen] = useState(false);
  const x = useSpring(open ? 200 : 0, { stiffness: 320, damping: 14 });
 
  return (
    <button onClick={() => setOpen((o) => !o)}>
      <span style={{ display: "inline-block", transform: `translateX(${x}px)` }}>
        ●
      </span>
    </button>
  );
}

Click the button repeatedly before it settles — because retargeting is velocity-continuous, the dot never jumps.

Your first spring (vanilla)

spring(config) returns a handle that drives requestAnimationFrame. It starts at rest at from and animates when you call set().

import { spring } from "sprungdesign";
 
const el = document.querySelector("#box") as HTMLElement;
 
const handle = spring({
  stiffness: 180,
  damping: 12,
  onUpdate: (value) => {
    el.style.transform = `translateX(${value}px)`;
  },
});
 
el.addEventListener("click", () => handle.set(300));

Next steps

Last updated on
IntroductionInstallation