solid-primitives
solid-primitives copied to clipboard
Add createSpring primitive.
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