Framer Classic » Draggable layers » Changing the speed

Changing the speed

A draggable layer will (naturally) follow your finger or mouse cursor, but you can set it to move slower or faster.

There are different speed properties for the x-axis and y-axis; their default value is 1.

# changing the horizontal speed
blueSquare.draggable.speedX = 1.5

# changing the vertical speed
blueSquare.draggable.speedY = .5
Download Framer project

Tip: These properties also provide an alternative way of disabling vertical or horizontal movement: you can simply set the speed to zero.

# the layer can only be dragged vertically
blueSquare.draggable.speedX = 0
A layer with adjusted speed settings
1.5x horizontal speed / 0.5x vertical speed

The above layer will move terribly slowly along the y-axis, at only half the regular dragging speed, but it moves 1.5x as fast when dragged left or right.


Leave a Reply