motion
motion copied to clipboard
Add useVelocity method
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:
Reproduction
Describe the bug
Missing Feature
Additional context
A lot of the features of framer motion is missing Kindly add them
Logs
No response