Qwik lacks a native spring primitive

[newsve]

What is it about?

Qwik lacks a powerful native spring API perfectly integrated with the state management like with Svelte and Solid

What's the motivation for this proposal?

Problems you are trying to solve:

• Spring physics are key and the only way to do proper UI animations
• Having a native primitive which interacts with the components lib's preferred state management is very important even more than with the components lib's markup, e.g., Svelte [1] and Solid [2] have such minimal APIs which are still the most powerful out there and perfectly integrated in their state management systems
• Other external spring libs have bloated APIs often merged with the actual components markup and hence, offer less flexibility; often they have huge bundle sizes too

[1] https://svelte.dev/docs/svelte/svelte-motion#Spring
[2] https://primitives.solidjs.community/package/spring

Goals you are trying to achieve:

• Use spring animation anywhere with the native state management system without mental overhead/without thinking too much

Any other context or information you want to share:

Solid API examples in combination with state management (Svelte's is pretty similar):

// Basic Example
const [progress, setProgress] = createSpring(0);

// Example with options (less sudden movement)
const [radialProgress, setRadialProgress] = createSpring(0, { stiffness: 0.05 });

// Example with collections (e.g. Object or Array).
const [xy, setXY] = createSpring(
  { x: 50, y: 50 },
  { stiffness: 0.08, damping: 0.2, precision: 0.01 },
);

// Example deriving from an existing signal.
const [myNumber, myNumber] = createSignal(20);
const springedValue = createDerivedSpring(myNumber, { stiffness: 0.03 });

// Setting a spring to a new value and forcing it not to spring but instant
// (a super important feature which most others lack except Svelte and Solid)
setProgess(1, { hard: true })

Proposed Solution / Feature

What do you propose?

A spring API using Qwik's native state statemanagament

Code examples

See above and close to Solid with more terse naming, e.g., no create, just spring

Links / References

No response

[thejackshelton-kunaico]

Hey @newsve! What you're describing with provided damping and other configuration options to create a spring is now part of native CSS. In particular the linear function.

This is something Qwik motion needs to tackle as part of its foundational generator API's (if it were to be an abstracted library)

https://easingwizard.com/

If you're interested in helping get this further I'd be happy to add you to the Qwik motion repo!