Pinchable layers » Tweaking the scaling behavior

Tweaking the scaling behavior

You can define how the layer should resize when you pinch it, of simply switch scaling off.

Disabling scaling

Switch off pinchable.scale to only use the two-finger gesture for rotating.

Note that the layer will still rotate from the center point between the fingers when center origin isn’t deactivated.

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

Scale incrementally

Instead of scaling continuously, you can set the increments the layer should snap to.

When you set a pinchable.scaleIncrements of 0.5, for instance, the layer will snap to the scales of: 0.5, 1, 1.5, 2, 2.5 …

# Scale the layer incrementally
layerA.pinchable.scaleIncrements = 0.2
Download Framer project

In this example the possible scales are: 0.2, 0.4, 0.6, 0.8, 1, 1.2, 1.4, 1.6 etc.

A pinchable layer with incremental scaling
A pinchable layer with incremental scaling

Minimum and maximum scale

You can set the minimum and maximum scale values a layer should resize to.

In the example below scaling is bracketed between 0.8 and 2.

I’ve also set the layer’s scaleIncrements to 0.2, so its possible sizes will be: 0.8, 1, 1.2, 1.4, 1.6, 1.8 and 2.

# Scale the layer incrementally
layerA.pinchable.scaleIncrements = 0.2
# Set the minimal scale to 0.8
layerA.pinchable.minScale = 0.8
# Set the maximal scale to 2
layerA.pinchable.maxScale = 2
Download Framer project
A pinchable layer with minimum and maximum scale values
A pinchable layer with a minimum and maximum scale, plus also incremental scaling

Changing the scaling speed

The scaleFactor defines how fast or slow the layer will scale compared to the movement of the fingers toward or away from each other. The default value is 1.

You could compare this to the dragging speed of a draggable layer, with the difference that the scaling rate is also determined by the initial distance between the two fingers.

# Decrease the scaling speed (default = 1)
layerA.pinchable.scaleFactor = .2
Download Framer project
A pinchable layer with lower scaling speed
A pinchable layer with only one-fifth of the normal scaling speed