Back To Videos

Grouping Layers

Tutorial length - 2:01 minutes

Step-by-step

In this guide, we'll cover how to group layers, setting up a parallax drag effect as an example. For more information, see our User Guide chapter on Working with Layers.

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

Create Parent Layer

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

Create Child Layer

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

Group Layers

  • Drag the Child layer and drop in onto the Parent layer.

  • This will nest the Child under the Parent layer. Child layers are affected by properties and animations applied to the Parent layer.

Add Drag to Parent

  • Apply a Drag interaction to the Parent layer.
  • Set the drag limiter to Vertical.

Add Move to Child

  • Apply a Move animation to the Child layer.
  • Set the Based On property to Parent and Drag Position.
  • Choose Continuously with rate for the Animates property.
  • Change the Rate from 1 to 1.5.

Test it out

    You should see the Child layer move faster than the Parent layer, creating a parallax motion.

Change Clipping

  • Change the Clipping property to bounds for the Parent layer.

Test it out

    The Child layer will now only show in the bounds of the Parent layer.