Trying to move clip path along X axis

[PinkMeNow]

Im trying to move clip path inside SVG along x axis while element that is inside clip path to be cliped by clip path and stay in position - in order to make a layered effect. Im not sure if I described it correctly.
Or is there any other technique to achieve this.
 

This is my CodePen

 

See the Pen VwJqPpd by drol (@drol) on CodePen

[mvaneijgen]

There is nothing called #clippath or #clippath-1, so your clip-path don't work, took me a while to figure out.

 

Below I've got something working, but I'm not sure what it is you want to do. Hope it helps and happy tweening! 

 

See the Pen NWZedox?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[PinkMeNow]

Imagine a pink shape is moving from right to left and when it starts overlapping light gray shape, cross section of both is colored as dark gray.

[mvaneijgen]

I don't have time to fix your whole SVG, but I did half. You need two clipPaths for each element and the one for the overlapping element stays still and the right shape and its mask move together with the overlapping shape. 

 

This is what it looks like in my design program "Affinity Designer". Hope it helps and happy tweening! 

 

See the Pen gONZWgX?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[PinkMeNow]

Thats exactly what Im looking for. Im just trying to figure out how to do this type of masking using Adobe Illustrator.

[mvaneijgen]

There should be just a 'mask' option. https://www.svgator.com/help/getting-started/creating-masks-in-adobe-illustrator

 

Good luck with the project. 

[PinkMeNow]

I figured it out thanks to your guidance. Eventually I made it using only one mask. Check my initial example.