Switching between states

You animate to a state by passing its name to the animate() function, as you would with a set of properties (because a state is actually a set of properties).

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

# press to animate to ‘bigAndBlue’
redSquare.onTapStart ->
    redSquare.animate "bigAndBlue"
# release to animate back to ‘default’
redSquare.onTapEnd ->
    redSquare.animate "default"

The square will now animate to "bigAndBlue" when you press it, and back to "default" upon release.

And when you don’t want any animation to occur you can use stateSwitch:

# press to jump to ‘bigAndBlue’
redSquare.onTapStart ->
    redSquare.stateSwitch "bigAndBlue"
# release to jump back to ‘default’
redSquare.onTapEnd ->
    redSquare.stateSwitch "default"

The square will now instantly switch between the "bigAndBlue" and "default" states.

Animation options

Animations will use Framer’s default values, but as you know, you can change these for a particular layer by setting its animationOptions.

redSquare.animationOptions =
    curve: Spring
# press to animate to ‘bigAndBlue’
redSquare.onTapStart ->
    redSquare.animate "bigAndBlue"

Here we’ve replaced the default ‘ease’ curve with a spring curve.

You can also add animation options directly to the animate() call, but this works a bit differently with states. You don’t put them in an options object (as you would when animating to properties). Instead, you type a comma after the name of the state and add them directly.

# release to animate back to ‘default’
redSquare.onTapEnd ->
    redSquare.animate "default",
        time: 2
        curve: Bezier.linear

You’re adding these animation options as extra arguments to the animate() function, so you can put them on the same line if you want.

# release to animate back to ‘default’
redSquare.onTapEnd ->
    redSquare.animate "default", time: 2, curve: Bezier.linear

The square will now grow with a bounce (the new default for the layer) but shrink linearly with a duration of 2 seconds (as was added to the animate() call).

Adding animation options to the state itself

And there’s yet another way to define animation options.

To always animate to a state (e.g. "bigAndBlue") in a particular way, you can set its animationOptions when creating it.

# animation options included with the state
redSquare.states.bigAndBlue =
    scale: 2
    backgroundColor: "blue"
    animationOptions:
        curve: Spring

This also works for existing states. We didn’t create the "default" state, but can just as well give it animation options:

# animation options set on a state after creation
redSquare.states.default.animationOptions =
    time: 2
    curve: Bezier.linear

The resulting prototype will work the same as the previous one.