Draggable layers » Automatic direction lock

Automatic direction lock

Have you noticed that Safari on iOS will stick to a horizontal or vertical direction once you start scrolling (when zoomed in on a page)? This is called ‘direction lock.’

What happens is this: the layer will wait when you start dragging, and only after you’ve dragged a small distance (e.g., ten points) it’ll lock to that direction and start moving.

By default, direction lock is disabled, so you have to switch it on:

# Allow dragging only in one direction at a time
blueSquare.draggable.directionLock = yes
Download Framer project
A layer with direction lock switched on
Direction lock enabled

You can also change the threshold for when a layer should lock to a direction.

# The default values are x: 10, y: 10
blueSquare.draggable.directionLockThreshold =
    x: 50
    y: 10
Download Framer project

You’ll now have to drag the layer fifty points left or right before it will start to move and lock to that direction.