motion icon indicating copy to clipboard operation
motion copied to clipboard

Add useVelocity method

Open arindampradhan opened this issue 1 year ago • 0 comments

System info

Need an implementation similar to the following

import * as React from "react";
import {
  motion,
  useMotionValue,
  useVelocity,
  useTransform,
  useSpring
} from "framer-motion";

const pink = (saturation: number) => `hsl(327, ${saturation}%, 50%)`;

export const Example = () => {
  const x = useMotionValue(0);

  /**
   * Smooth x with useSpring. This isn't always neccessary but we're using
   * a drag gesture to change x and user input can be noisey.
   */
  const xSmooth = useSpring(x, { damping: 50, stiffness: 400 });

  /**
   * Create a motion value from the smoothed output of x
   */
  const xVelocity = useVelocity(xSmooth);

  /**
   * Transform the velocity of x into a scale motion value
   */
  const scale = useTransform(xVelocity, [-3000, 0, 3000], [2, 1, 2], {
    clamp: false
  });

  /**
   * Transform the velocity of x into a range of background color intensities
   */
  const backgroundColor = useTransform(
    xVelocity,
    [-2000, 0, 2000],
    [pink(100), pink(0), pink(100)]
  );

  return (
    <motion.div
      drag="x"
      dragElastic={1}
      dragConstraints={{ left: -200, right: 200 }}
      style={{ x, scale, backgroundColor }}
    />
  );
};

with example similar to the below:

use-velocity

Reproduction

Describe the bug

Missing Feature

Additional context

A lot of the features of framer motion is missing Kindly add them

Logs

No response

arindampradhan avatar Jul 09 '24 09:07 arindampradhan