how to color a changing intersection?

I am wondering how to do something like the following:
If I move two shapes (painted areas) over each other,
how can I color (and highlight the border of) the overlap
of the two shapes a specified color?

I understand that I can make the top shape color partially transparent,
but that only gives me the color created from the top
transparent color over the bottom color.

Is there a way to set that intersection to be a completely different color?


I can see a way to do this but I must first tell you it is quite tedious and it might be hard to understand how it works. If you want to have a more visual explanation I could send you a project that reflect this technique, simply send me a private message or and an e-mail to and I will forward the project to you. In any case here it goes.

The main concept is to use a mask to display a duplicate of the element that will overlap which you will paint in another color. So lets say you have a red square and a blue circle and you want that where the overlap is done in between both shape the color is green. For this you will need to do the following:

1. Have the blue circle underneath everything
2. Put the red square above it
3. Animate both of the element (so basically move the blue circle across the red square)
4. Duplicate your red square and make a mask out of it
5. Duplicate your blue circle and make it green
6. Drop the green circle inside the mask you have made
7. Make sure the mask effect is above the red square

This way, your blue circle will go behind your red square. Since the green circle is hidden by the mask that is the red square it will not show up above the blue circle. Although, whenever it will intersect the red square it will uncover to allow you to see it. For this to work properly you need to make sure everything is at the same Z depth and also that everything has exact same movement. If your square was to move you need to apply the same movement to the mask and when your circle move both need to move at the same speed in the same place.

I know it is not that obvious to understand but if you have any further questions feel free to ask.

Best regards,


Thank you so much for the quick and detailed reply!
I tried it out and got it to work.
Great motivation for learning how to use masks
(had seen the examples in the tutorials/user guide and skipped them since they looked complicated…so didn’t really understand what they could be used for).

For others that may be trying this out with no previous knowledge of masks, I also read the User Guide section on "Creating Clipping Mask Effects."

To match the terms used in the User Guide:
"4. Duplicate your red square and make a mask out of it"
means duplicate the red square, add a clipping effect, and drop the red square on the Mask Layer.

"6. Drop the green circle inside the mask you have made"
means drop the green circle on top of the Clipping Effect Layer

Thank you again!