Framer Classic » States » Switching between states

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"
Open in Framer

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

Switching between two states with animation

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"
Open in Framer

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

Jumping between two states without animation

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
Open in Framer

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).

Growing with a spring animation, but shrinking linearly

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
Open in Framer

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


Leave a Reply