Framer Classic » States » Creating states

Creating states

This is our example layer, a red square:

redSquare = new Layer
    size: 300
    backgroundColor: "red"
    point: Align.center

Each layer has a states object in which you save those states.

To add a state, you select a name (anything except ‘default,’ obviously) and set the desired properties.

Let’s pick "bigAndBlue":

redSquare.states.bigAndBlue =
    scale: 2
    backgroundColor: "blue"

The redSquare layer has now, next to its default state, one new state: "bigAndBlue".

You can also define several states at the same time if you want, like this:

redSquare.states =
    smallAndOrange:
        scale: .5
        backgroundColor: "orange"
    rotated:
        rotation: 45

But keep in mind that when using layer.states =, you’ll override any states that may have been set previously.

In this example, "bigAndBlue" doesn’t exist anymore, and the layer now has three states: "smallAndOrange", "rotated" and, as always, "default".


Leave a Reply