Framer Classic » Events » State change events

State change events

If you want something to happen when a layer changes state, you can listen to the following events. They are similar to the animation events.

State change events
onStateSwitchStartThe layer is about to animate to a new state.
onStateSwitchStopThe state switch animation stopped. (Is always triggered, either when it was stopped halfway or ran until completion.)
onStateSwitchEndThe layer finished animating to a new state.

Here’s an example:

redSquare.onStateSwitchStart ->
    print "Switching from state: ‘#’"

redSquare.onStateSwitchEnd ->
    print "… to state: ‘#’"
Download Framer project

When you tap on the square, it will output…

» "Switching from state: ‘default’"

…and then a second later, when the state switch completed:

» "… to state: ‘bigAndBlue’"

Current state

As you can see in the above example, you can lookup a layer’s current state with states.current.name.

Pro tip: By adding (from, to) parameters to your event handler (in this order) you can more easily access the names of both the current and next state.

redSquare.onStateSwitchStart (from, to) ->
    print "Switching from state: ‘#’"

redSquare.onStateSwitchEnd (from, to) ->
    print "… to state: ‘#’"
Download Framer project

Overview of the state change events

The three state change events
Download Framer project

Leave a Reply