How to enable dragElastic only for one side ?

[Aarbel]

Hi Motion community,

Is there a way to enable dragElastic on the left side but without making the "elasticity" to be working on the right side ?

Code

import { motion } from "framer-motion";

export function Example() {
    return (
        <motion.div
            style={{
                width: 150,
                height: 150,
                borderRadius: 30,
                backgroundColor: "#fff",
                cursor: "grab"
            }}
            drag="x"
            dragDirectionLock
            dragConstraints={{ left: 0, right: 0 }}
            dragElastic={0.5}
        />
    );
}

Code sample: https://codesandbox.io/p/sandbox/mighty-motion-guide-some-examples-12-drag-direction-locking-forked-tfsl8k?file=%2Fsrc%2FExample.jsx

Expected behavior in "simulated" video

Dragging on the right doesn't make the div be "elastic"
https://github.com/user-attachments/assets/ccce5602-acf4-40da-bc93-d53ffda47142

Current (bad) behavior in video

The elastic works on both sides
https://github.com/user-attachments/assets/d17ba535-2bd7-4c28-a6db-ad1e742abfab

[Aarbel]

Hi everyone, do you have any feedbacks / fixes for that ?

[gavro]

Not sure if @Aarbel is still interested in a "solution" (e.g. usable workaround) but you can get this done by using useMotionValue and _dragX.

For example (based on code from original post):

import { motion, useMotionValue } from "framer-motion";
import { useEffect } from "react";

export function Example() {
    const x = useMotionValue(0);

    useEffect(() => {
        x.on("change", () => {
            if (x.get() < 0) x.set(0);
        });
    }, []);

    return (
        <motion.div
            style={{
                width: 150,
                height: 150,
                borderRadius: 30,
                backgroundColor: "#fff",
                cursor: "grab",
                x
            }}
            drag="x"
            dragConstraints={{ left: 0, right: 0 }}
            dragElastic={0.5}
            _dragX={x}
        />
    );
}

Sandbox example: (based on code from original post): codesandbox.io.