solid-primitives icon indicating copy to clipboard operation
solid-primitives copied to clipboard

Add createSpring primitive.

Open Blankeos opened this issue 9 months ago • 2 comments

Summary

  • This PR adds the createSpring primitive. Inspired and Forked from https://svelte.dev/docs/svelte-motion#spring
  • The API works exactly like createSignal, just that the setter will actually interpolate the value.
  • It also has familiar opts as the one with svelte-motion/spring.
  • I come from using Svelte and it's one of the most essential primitives I use for animation. I've been using Solid more and more and have come to love it. I think this primitive is one of the few missing for me here. I think Solid would greatly benefit from a primitive like this since we already have a tween primitive.

Example Usage:

export default function SpringyPage() {
  const [progress, setProgress] = createSpring(0);

  const [radialProgress, setRadialProgress] = createSpring(0, {
    stiffness: 0.05,
  });

  const [xy, setXY] = createSpring(
    { x: 50, y: 50 },
    { stiffness: 0.08, damping: 0.2, precision: 0.01 }
  );

  function toggleProgress() {
    if (progress() === 0) setProgress(1);
    else setProgress(0);
  }
  // ...

Witness, the springiness:

https://github.com/solidjs-community/solid-primitives/assets/38070918/7c4fa01f-7959-4a67-9588-e28448f7f20d

https://github.com/solidjs-community/solid-primitives/assets/38070918/4dcf9e6f-7a2e-44f8-b15a-d29d6551f561

Todos:

  • [x] Tests
  • [x] README.md
  • [x] package.json

Blankeos avatar May 12 '24 11:05 Blankeos