Back To Videos

Basic Conditions

Tutorial length - 1:40 minutes

Step-by-step

Here we cover using conditions to scale a layer as it is dragged past a specific point on the screen. For more information, see our User Guide chapter on Conditions.

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

Create Layer and Add Drag

  • Create a layer with these specifications.
  • Rename the layer to Draggable layer.
  • Apply the Drag interaction to the layer.

Add Scale

  • Apply the Scale animation to the layer.
  • Set the Based On options to Draggable layer and Drag Position.
  • Set Animates to With duration to final value.
  • In the Condition field, enter draggable_layer.y > 300.
  • Enter 2 into the Scale field.
  • Choose Spring for the Easing Curve option.

Test it out

    Drag the layer from the top of the screen to the bottom. Towards the bottom of the screen, the layer should scale up with a spring curve, but not scale back down when dragged to the top.

Add Condition

  • Click the +Condition link at the bottom of the animation properties.
  • Enter draggable_layer.y <= 300 into the Else If field.
  • Enter 1 into the second Scale field.
  • Choose Spring for the second Easing Curve option.

Test it out

    Now when dragging the layer from the bottom of the screen to the top, you'll see the layer scales back down to its original size.