States » Cycling through states

Cycling through states

You can simply animate to the next state with stateCycle().

For this example, I’ve added a third state: "rotated".

redSquare.states =
        scale: 2
        backgroundColor: "blue"
        rotation: 45
redSquare.animationOptions =
    curve: Spring
# go to the next state when the layer is tapped
redSquare.onTap ->
Download Framer project
Cycling through three different states

By default stateCycle() will use the order in which the states were created, but you can pass in a different order.

redSquare.onTap ->
    redSquare.stateCycle "default", "rotated", "bigAndBlue"
Download Framer project

This has a different result: in the "bigAndBlue" state the square will now be big, blue, but also 45 degrees rotated because the "rotated" state preceded it.

It’s because state changes (or any other animation) will always happen from the current properties of the layer to the new properties.

The "bigAndBlue" state says:

Make it blue and twice the size.

So that’s precisely what happens, the layer having been rotated or not.

Cycling through states in a predefined order

Animation options

Just as with animate() you can add animation settings to stateCycle() as well.

redSquare.onTap ->
    redSquare.stateCycle "default", "rotated", "bigAndBlue",
        time: 0.25
        curve: Bezier.linear
Download Framer project

You can omit the extra comma when not adding a custom order.

redSquare.onTap ->
        time: 0.25
        curve: Bezier.linear

To define the animation settings for each state independently you can always add them to the states themselves.

Cycling through the states with a linear animation