Back To Videos

State Toggles Using Conditions

Tutorial length - 1:33 minutes

Step-by-step

In addition to using conditions to describe animation behavior, you can also use animation conditions to simulate states. For more information, see our User Guide chapter on Conditions.

All size, position and conditional values used are specific to a prototype designed for an iPhone 5.

Create Layer & Add Tap

  • Create a layer with these specifications.
  • Apply the Tap interaction to the layer.

Add Scale & Set Properties

  • Apply the Scale animation to the layer.
  • Set the Based On options to Toggle me and Tap.
  • With duration to final value will automatically be set for the Animates option.
  • Enter 2 in the Scale field.
  • Choose Spring for the Easing Curve option.

Test it out

    Tapping the field scales the layer up.

Add condition

  • Enter toggle_me.scale == 1 into the Condition field.
  • Click the +Condition link to add a condition.
  • Leave the second Condition field empty. This will check for any other state aside from the condition defined in the If field.
  • Enter 1 in the Scale field.

Test it out

    Tapping the field scales the layer up and tapping it again scales it back to its original size.

    If the layer is not picking up the taps right away, set the first condition to <= instead of == and enter toggle_me.scale > 1 into the second condition field.

    The subsequent taps may not animate right away because the spring easing curve is oscillating the layer's scale, keeping it from exactly equaling 1 until it settles. Looking for a value that is less than or equal to 1 compensates for the spring.