Animation » Example Animations » 12. Drag: Direction locking

12. Drag: Direction locking

Limit dragging to one direction (at a time) by switching on dragDirectionLock. Because of the dragConstraints, this box will also jump back to its initial position.

Code component

export default function CC_12_Drag_Direction_locking(props) {
    return (
        <div>
            <motion.div
                style={{
                    width: 150,
                    height: 150,
                    borderRadius: 30,
                    backgroundColor: "#fff",
                    cursor: "grab",
                }}
                drag
                dragDirectionLock
                dragConstraints={{ top: 0, right: 0, bottom: 0, left: 0 }}
                dragTransition={{ bounceStiffness: 600, bounceDamping: 20 }}
                dragElastic={0.5}
                whileTap={{ cursor: "grabbing" }}
            />
        </div>
    )
}

Code override

export function Drag_Direction_locking(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                drag
                dragDirectionLock
                dragConstraints={{ top: 0, right: 0, bottom: 0, left: 0 }}
                dragTransition={{ bounceStiffness: 600, bounceDamping: 20 }}
                dragElastic={0.5}
            />
        )
    }
}

Leave a Reply