You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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 }}
/>
);
};
System info
Need an implementation similar to the following
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
The text was updated successfully, but these errors were encountered: