Pinchable layers » Tweaking the rotation behavior

Tweaking the rotation behavior

You can rotate to predefined steps, change the rotation speed or completely disable rotation.

Disabling rotation

Just as with scaling, you can also disable rotation.

# No rotation, only scaling
layerA.pinchable.rotate = no
Download Framer project
A pinchable layer with rotation disabled
A pinchable layer with rotation disabled

Rotate incrementally

Instead of rotating continuously, you can set the increments the rotation should snap to.

In this example the rotate increments are set to 15, which means the rotation of the layer will snap to: 0, 15, 30, 45, 60, 90, 105 etc. degrees.

# Rotate in increments of 15 degrees
layerA.pinchable.rotateIncrements = 15
Download Framer project
A pinchable layer with incremental rotation
A pinchable layer with incremental rotation

Changing the rotation speed

Normally the layer will follow your fingers when rotating, but you can speed this up or slow it down by setting the rotateFactor.

In this example, the speed has been doubled. Therefore a rotation of only 45º with your fingers would be necessary to have the layer turn 90º.

# Double the rotation speed
layerA.pinchable.rotateFactor = 2
Download Framer project
A pinchable layer with higher rotation speed
A pinchable layer with double the normal rotation speed

(I disabled center origin in the above example so that the layer rotates around its center.)