I'm creating a UI animation for a phone. I've got it so the menu transitions slowly moves in from the side. However as you can see the menu can be seen coming in from outside of the screen like the image below.

How can I make it so the layer can only be seen within the green rectangle, so I can keep the same transition, but you can only see it occur within the phones screen?

enter image description here

  • You could mask it, but I would probably make a new comp with the dimensions of the green area and then drag it to the main comp as a footage. On a somewhat unrelated note, maybe this could be useful to you: graphicdesign.stackexchange.com/questions/31207/…
    – Joonas
    Nov 9, 2014 at 15:41
  • @Joonas It worked thanks :) Not sure if you want to leave it as an actual answer so I can give you some points?
    – Ralt
    Nov 9, 2014 at 16:02

1 Answer 1


You can make a new comp Cmd+N with the screen dimensions, and in the project panel, drag that new comp into your main comp. Then you can make the UI animations within that new comp and they will be updated to your main comp. The new comp size will work sort of like mask in this case.

If you've already created/animated the layers in your main comp, you can select them and choose Layer > Pre-compose… from the top menu, and the layers you selected will be put into their own comp. Then you can edit the settings of that comp to match the screen size.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.