Global values » Framer defaults

Framer defaults

The Framer.Defaults object contains the defaults for newly created layers and animations. You can override these values.

Layer defaults

By default, layers created in Code are transparent gray, 200 points wide and tall, and positioned in the top left.

You can set new backgroundColor, width and height values (or any other property) on Framer.Defaults.Layer to make them the new defaults.

Framer.Defaults.Layer.width = 300
Framer.Defaults.Layer.height = 100
Framer.Defaults.Layer.borderRadius = 20
Framer.Defaults.Layer.backgroundColor = "orange"
Framer.Defaults.Layer.x = 100
Framer.Defaults.Layer.y = 100
# or you can also write them like this:
Framer.Defaults.Layer =
    width: 300
    height: 100
    borderRadius: 20
    backgroundColor: "orange"
    x: 100
    y: 100
layerA = new Layer
Download Framer project
New layer defaults

Animation defaults

The default animation values are:

  • curve = Bezier.ease
  • time = 1

These values are not only used for new Animation objects, but also for the animate() function, and animations between states.

You override the defaults by setting new values on Framer.Defaults.Animation.

Framer.Defaults.Animation.curve = Spring
layerA = new Layer
    y: 300
Download Framer project