Create useLerp hook

[VictorGa]

Lerping hook for simple transitions. Properties would be initial number, final number, duration, ease method.

[leroykorterink]

@VictorGa can you provide an example of an implementation? A simple lerp can be implemented in a function, don't really see the benefit to have a hook for it.

I agree that having these functions ready to use is useful but wouldn't recommend implementing it via a react hook.

[ReneDrie]

The lerp as a function is already available (gsap.utils.interpolate). But I assume this does the animationFrame loop, and keeps updating the current value by interpolating to the target value.

I currently use something like this:

import { noop } from 'lodash-es';
import { useCallback, useRef } from 'react';
import { useRafLoop } from 'react-use';

export type LerpPoint = { x: number; y: number };
export type LerpValue = number | LerpPoint;

export function useLerp(
  value: LerpValue,
  target: LerpValue,
  interpolateValue = 0.1,
  callback: (value: LerpValue) => void = noop,
): (target: LerpValue) => void {
  const currentValue = useRef<LerpValue>(value);
  const targetValue = useRef<LerpValue>(target);
  const interpolate = useRef<number>(interpolateValue);

  useRafLoop(() => {
    if (typeof targetValue.current === 'number' || typeof currentValue.current === 'number') {
      currentValue.current = gsap.utils.interpolate(
        currentValue.current,
        targetValue.current,
        interpolate.current,
      );
    } else {
      currentValue.current.x = gsap.utils.interpolate(
        currentValue.current.x,
        targetValue.current.x,
        interpolate.current,
      );
      currentValue.current.y = gsap.utils.interpolate(
        currentValue.current.y,
        targetValue.current.y,
        interpolate.current,
      );
    }

    callback(currentValue.current);
  });

  return useCallback((updatedTarget: LerpValue) => {
    targetValue.current = updatedTarget;
  }, []);
}

[VictorGa]

Yes, exactly that. I didn't mean the formula in a hook. Mostly a way to interpolate the values in an easier way using a hook for it, regardless if we use interpolate from gsap or a formula, could be handy. We have an example from @evertmonk. I'll create a PR for it soon.