Back To Videos

Timed Animations

Tutorial length - 1:04 minutes

Step-by-step

Timed animations let you animate based on events like tap. In this guide, we'll show how to move a layer when it's tapped. For more information, see our User Guide chapter on Animations.

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

Create Layer

  • Create a layer with these specifications.
  • Rename the layer to Tappable layer.

Add Tap

  • Apply the Tap interaction to the layer.

Add Move

  • Apply the Move animation to the layer.
  • Set the Based On options to Tappable layer and Tap.
  • With duration to final value will automatically be set for the Animates option.
  • Enter 300 in the Top field, under Move to.

Test it out

    When you tap on the layer it will move down the screen.

Add Spring

  • Choose Spring from the Easing Curve menu.

  • The layer should now bounce when it hits the end of it's animation.