Skip to content

Add useVelocity method #212

@arindampradhan

Description

@arindampradhan

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions