Back To Videos

Advanced Conditions

Tutorial length - 3:00 minutes

Step-by-step

We'll cover some of the more advanced uses of conditions in this video to simulate a slider snapping to various points when it is released. 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 Layers

  • Create these layers; they are ordered as they appear in the layer list, from top to bottom.

Add Drag & Set Limits

  • Apply the Drag interaction to the Handle layer.
  • Change the limiter from Free to Horizontal.
  • Enter 20 for the Min position value. This will limit the left drag to the left end of the track.
  • Change the second Reference edge to Right and enter 300 for the Max position. This will limit the right drag to the right end of the track.

Add Move & Set Properties

This will create the snap-to-place movement for the first stop.
  • Apply the Move animation to the Handle layer.
  • Rename the animation to Move on Release by double clicking on the current name.
  • Set the Based On options to Handle and Drag Release.
  • With duration to final value will automatically be set for the Animates option.
  • In the Condition field, enter handle.cx < 100. This is the midpoint between the first stop and the second.
  • Enter 20 in the Left field, under Move to.

Test it out

    Drag the handle to the right. If you release before the midpoint of the first and second stop, you should see the handle move back to the first stop.

    Releasing it past the midpoint won't do anything, since the conditions have not been setup yet.

Add properties

This will create the snap-to-place movement for the second stop.
  • Click the +Condition link at the bottom of the animation properties.
  • Enter handle.cx >= 100 && handle.cx <= 220, in the Else If field. This is defining the area between the first and second midpoints.
  • Change the first Move to to Horizontal Center and enter 160.

Test it out

    Drag the handle to the right. If you release before the midpoint of the first and second stop, you should see the handle move back to the first stop.

    If you release the handle anywhere between the first midpoint and the second midpoint, the handle should move to the second stop.

Add properties

This will create the snap-to-place movement for the final stop.
  • Click the +Condition link at the bottom of the animation properties.
  • Enter handle.cx > 220, in the Else If field.
  • Change the first Move to to Right and enter 300.

Test it out

    Drag the handle to the right. If you release before the midpoint of the first and second stop, you should see the handle move back to the first stop.

    If you release the handle anywhere between the first midpoint and the second midpoint, the handle should move to the second stop.

    If you release the handle after the second midpoint, the handle should move to the last stop.