[FEATURE] Introduce useTransition for custom animations

I would like to create a custom animation with my own transition setup that is not a spring transition (e.g. tween or keyframes based).

Currently useSpring exposes a way of creating a MotionValue that can transition to a new value when set; however, there is no way to create a MotionValue that uses a different transition configuration. The use cases are the same for the useSpring hook (just using a different transition).

I could be wrong but I don’t think useMotionValue does this right now, it’s more of a tracking variable for animations that are occurring.

I’d imagine this would work like useSpring except it would allow for any transition to be specified – useSpring could then just be derived from useTransition. An alternative could be to expose useTween and useKeyframes, but that feels like it would get annoying. Something like:

// Simple transition
const x = useTransition(0, { duration: 1, delay: 0.5 });
x.set(500); // x transitions to 500 and takes 1s after a 0.5s delay

// Spring transition
const x = useTransition(0, { type: 'spring', ...}); 

[mattgperry]

Hi @BenMagyar. I sort-of see the use-case. useSpring is uniquely useful in how it integrates existing velocities ie https://codesandbox.io/s/framer-motion-usespring-6s2gr.

The problem with the useSpring API in general is you’re bound to React’s render lifecycle when you want to change the transition. It might be more likely that we offer an imperative animate function ie

const x = useMotionValue(0)

animate(x, 100, transition)

That could conceivably animate one or more values outside of React’s lifecycle.

But as we already have ways of declaratively and imperatively animating components I probably won’t press on this until there’s a way of using this with something other than the DOM, ie a hook that could be used with the canvas.

[RuudBurger]

I was searching for a similar options, so I created a hook that works like useSpring does, but for all transitions:

const useTransition = <T>(source: MotionValue<T>, config?: {}) => {
  const animatedMotionValue = useMotionValue(source.get());

  useEffect(() => {
    let animation: undefined | ReturnType<typeof animate>;

    return source.onChange((newValue: T) => {
      animation?.stop(); // Don't know if this is needed
      animation = animate(animatedMotionValue, newValue, config);
    });
  }, [animatedMotionValue, config, source]);

  return animatedMotionValue;
};

const MyComponent = () => {
  const x = useMotionValue(0);
  const animatedX = useMotionValue(x, {});

  useEffect(() => {
    setTimeout(() => {
      x.set(100);
    }, 1000)
  },[x]);

  return <motion.div style={{ x: animatedX }} />
}

I assume you can use spring aswel, because it just uses the animate function from framer-motion