How to Add Easing or Delay to x and y Coordinates in Framer Motion Drag Gesture

[thmsfchtnr]

Hi everyone,

I'm working on a project using Framer Motion and I'm trying to enhance the drag gesture control for an element. Specifically, I want to:

Add Easing: Apply easing to the x and y coordinates while the element is being dragged.
OR
Introduce a Delay: Implement a delay in the x and y coordinates during the drag motion.

[thmsfchtnr]

What I have tried:
<motion.div onPan={(_, info) => { cardControls.start({ x: info.offset.x, y: info.offset.y, }); }} className="absolute bg-black w-full h-96" style={{ zIndex: order, perspective: 400, touchAction: 'none', }} animate={cardControls} ></motion.div>

But this wont work only if I let go the mouse button the div will animate