# Drag Lock Direction

## Interactive Design

{% embed url="<https://www.designedto.work/design/drag-lock-direction/>" %}

## Code

{% embed url="<https://github.com/EridianAlpha/DesignedTo.Work/tree/main/components/designs/drag-lock-direction>" %}

## Design Notes

* **Controlling drag direction and animation using Motion.** Useful to return an object to a datum position after manipulating.

## Design Ideas

{% hint style="info" %}
**React Bits**

<https://motion.dev/examples/react-drag-lock-direction>

![](https://1701252977-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvMDdKNXxwPwb5xekxw5H%2Fuploads%2FXNB3405OTVHIZ94RlpbL%2FImage20260110171404.gif?alt=media\&token=1acdaf4e-9c2a-49aa-bfc3-72aa405b1a6d)
{% endhint %}