Understanding Drag Events

Framer Motion allows us to respond to various drag events, including onDrag, onDragStart, onDragEnd, and onDirectionLock. Here’s an example of how to implement these events:

import { motion } from "framer-motion";

import React from "react";

export default function App() {

return (

<motion.div

onDrag={(event, info) => console.log(info.point.x, info.point.y)}

onDragStart={(event, info) => console.log(info.point.x, info.point.y)}

onDragEnd={(event, info) => console.log(info.point.x, info.point.y)}

/>

);

}

In this code, info.point.x and info.point.y provide the x and y coordinates of the drag position. Additionally, we can implement the onDirectionLock event to restrict drag direction. For instance:

import { motion } from "framer-motion";

import React from "react";

export default function App() {

return (

<motion.div

dragDirectionLock={true}

drag="x"

onDrag={(event, info) => console.log(info.point.x, info.point.y)}

/>

);

}

Here, setting dragDirectionLock to true and drag to 'x' locks the dragging to the horizontal axis.

MotionValues: Tracking State and Velocity

MotionValues in Framer Motion monitor the state and velocity of animated values. They can be created manually, allowing synchronization across multiple components and enabling visual property updates without requiring re-renders.

For example, to change the opacity of an element based on drag position, we can use:

import { motion, useMotionValue, useTransform } from "framer-motion";

import React from "react";

const input = [-200, 0, 200];

const output = [0, 1, 0];

export default function App() {

const x = useMotionValue(0);

const opacity = useTransform(x, input, output);

return (

<motion.div style={{ opacity }} />

);

}

In this snippet, the useMotionValue hook creates a MotionValue, and useTransform maps the x position to the corresponding opacity levels. The input array specifies the positional range, while the output array determines the opacity range.

Manipulating MotionValues

MotionValues can be both retrieved and updated. The set method assigns a new value to the MotionValue, while get and getVelocity fetch the current position and its velocity, respectively. Consider this example:

import { motion, useMotionValue, useTransform } from "framer-motion";

import React, { useEffect } from "react";

const input = [-200, 0, 200];

const output = [0, 1, 0];

export default function App() {

const x = useMotionValue(0);

const opacity = useTransform(x, input, output);

useEffect(() => {

x.set(100);

}, []);

useEffect(() => {

console.log(x.get());

console.log(x.getVelocity());

}, [x]);

return (

<motion.div style={{ opacity }} />

);

}

In this example, x.set(100) initializes the position, while the subsequent effects log the current position and velocity to the console.