using spring animations ?

[kevinseabourne]

How do I use spring animations, with motion one you used to simply state "spring" as the value for the easing, I looked into the package and you cannot state spring as an easing option. I know from motionone it self, that if you want spring animations you need to state spring otherwise you wont see it.

linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "steps-start" | "steps-end" | `steps(${number}, ${"start" | "end"})` | BezierDefinition;

[thetarnav]

Is this an issue with the types or the runtime? Both seem to come directly from @motionone/dom so I'm not sure if I'm missing something or that is intended and motion.spring is meant to be used separately.

with motion one you used to simply state "spring" as the value for the easing

Do you mean something like this?

motion.animate(
	element,
	{scale: 2, opacity: 1},
	{easing: motion.spring()},
)

[nicoknoll]

I was running into the same issue. I think something on the typing of motion might be wrong. I solved it by directly installing motion one (npm install motion) and do it like:

import { Motion } from 'solid-motionone';
import { spring } from 'motion';

[...]

 <Motion.span
      animate={{ left: `${tabUnderlineLeft()}px`, width: `${tabUnderlineWidth()}px` }}
      transition={{ easing: spring({ stiffness: 50, damping: 10 }) }}
  />