Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add useVelocity method #212

Open
arindampradhan opened this issue Jul 9, 2024 · 0 comments
Open

Add useVelocity method #212

arindampradhan opened this issue Jul 9, 2024 · 0 comments

Comments

@arindampradhan
Copy link

arindampradhan commented Jul 9, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant