Dragging » Min and Max

Min and Max

📘 The Framer Code Guide – 🧲 Dragging

 

Instead of setting dragConstraints, you can add min and max values to dragTransition. This has the same effect.

So instead of writing this:

export function DragConstraints(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                drag
                dragConstraints={{
                    top: -250,
                    right: 250,
                    bottom: 250,
                    left: -250,
                }}
            />
        )
    }
}
React TSX

… you can also write this:

export function MinAndMax(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                drag
                dragTransition={{ min: -250, max: 250 }}
            />
        )
    }
}
React TSX
I1 – Min and Max

But you see the limitation: The min value stands for both left and top. And the same is true for max: it defines the constraints for both the right and bottom. So you can only use them when the draggable element is allowed to move an equal distance in those directions.

min, max

Leave a Reply