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 }) }}
  />

[sebastiansandqvist]

I solved it by directly installing motion one (npm install motion)

@nicoknoll What versions of solid-motionone and motion are you using that work here? I get a variety of type errors when trying this with 1.0.4 and 12.18.1.

I'm seeing in the docs:

This package supplies springs, independent transforms, and hardware accelerated animations.

But I can't find any examples, tests, or other code related to springs, so I'm struggling to figure out how to use them.