[FEATURE] Headless animations

Is your feature request related to a problem? Please describe. Currently animations require a motion component. Being able to drive these independently would be useful for a number of reasons, like animating non motion components, animate with custom interpolators like flubber, etc.

Describe the solution you’d like Something along the lines of:

useAnimation(
  ({ height }) => {
    // Freedom to do:
    heightMotionValue.set(height)
    // Or:
    setHeightState(height)
    // Or:
    componentCallback(height)
  },
  isOpen ? { height: 100 } : { height: 0 }
)

Describe alternatives you’ve considered We have a useAnimatedState experimental hook but it’s limited to just React state. Hopefully this feature will superceed this. We have useSpring but it’s just a single MotionValue. This feature shouldn’t rely on anything else, offering a function to deal with the output with motionvalues, states, anything.

[wr9]

@cloudratha Thanks a lot, I couldn’t wrap my head around this problem.

I had some issues with the transform(value, [0, 1], [0, 1]) part of your solution -> I assumed here you meant useTransform(value, [0, 1], [0, 1]), maybe I was wrong.

Instead of it I just did:

const pathPos = useSpring(0, {
    damping: 100,
  });

const path = useTransform(pathPos, (value) => interpolator(value));

The rest is the same. Thanks, again!

Also, I completely agree with your suggestion of useTween and I don’t like the lack of support for this issue, and other similar ones (https://github.com/framer/motion/issues/218, https://github.com/framer/motion/issues/329).

[cloudratha]

I’ve just run into needing this feature. I was able to use existing hooks to integrate with flubber.

  const pathPos = useSpring(0, springConfig)
  const path = useTransform(pathPos, value =>
    interpolator(transform(value, [0, 1], [0, 1]))
  )
  useEffect(() => {
    pathPos.set(open ? 1 : 0)
  }, [open])
  
  return (
    <svg>
      <motion.path d={path} />
    </svg>
  )

It would be much easier to have a useTween for this example as i need to clamp the values with transform. Also having access to duration wouldn’t hurt either.

With useAnimation do you get access to the individual MotionValue’s for each entry, to better control the above?