> ## Documentation Index
> Fetch the complete documentation index at: https://rive-quickstart.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Distance Constraint

> Keep an object within, beyond, or at a specific distance from another object.

export const Marketplace = ({href, children}) => {
  const hrefWithTracking = `${href}?utm_source=docs&utm_medium=docs_link_card&utm_campaign=docs_to_marketplace_links`;
  return <Card title="Learn by remixing" icon="external-link" href={hrefWithTracking} arrow="true" horizontal>
      {children ? children : "Open this file on Marketplace, then click Remix to experiment in the Rive Editor."}

    </Card>;
};

export const VideoEmbed = ({src, maxWidth}) => {
  return <div style={{
    height: "100%"
  }}>
      <video src={src} autoPlay loop muted playsInline style={{
    width: "100%",
    maxWidth: maxWidth || "100%",
    height: "100%",
    borderRadius: 0,
    margin: 0,
    display: "block",
    objectFit: "cover",
    backgroundColor: "transparent"
  }} />
    </div>;
};

export const YouTube = ({id, timestamp}) => {
  const videoSrc = timestamp ? `https://www.youtube.com/embed/${id}?start=${timestamp}` : `https://www.youtube.com/embed/${id}`;
  return <iframe width="100%" height="400" src={videoSrc} title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen />;
};

## Adding a Distance Constraint

<YouTube id="Nvwf27EIvdw" />

<Steps>
  <Step title="Add a Distance Constraint">
    Select an object, then add a **Distance Constraint** from the **Constraints** section of the Inspector.
  </Step>

  <Step title="Choose a target">
    Open the constraint's fly-out menu and select the object to use as the target.
  </Step>

  <Step title="Move the target">
    Move the target to see the constraint affect the constrained object. By default, the **Closer** mode keeps it within the specified distance.
  </Step>
</Steps>

<VideoEmbed src="https://static.rive.app/video/distance-constraint.mp4" />

<Marketplace href="https://rive.app/community/files/28736-distance-constraint" />

## Properties

### Strength

**Strength** controls how much the constraint affects the object. At 0%, the constraint has no effect.

### Distance

**Distance** sets the distance used by the constraint. A red circle on the Stage represents this distance from the target.

### Mode

**Mode** determines how the constrained object can be positioned relative to the **Distance** value.

#### Closer

Keeps the constrained object within the specified distance from the target. When the target moves too far away, the object follows to stay within that distance.

<VideoEmbed src="https://static.rive.app/video/distance-constraint-closer.mp4" />

#### Further

Keeps the constrained object beyond the specified distance from the target. When the target moves too close, it pushes the object away to maintain the minimum distance.

<VideoEmbed src="https://static.rive.app/video/distance-constraint-further.mp4" />

#### Exact

Keeps the constrained object exactly at the specified distance from the target. When the target moves, the object follows to maintain that distance.

<VideoEmbed src="https://static.rive.app/video/distance-constraint-exact.mp4" />
