How to animate the intersection of paths

[Caroline_Portugal]

I'd like for the dark-blue shape to be shown only when the two outline paths intersect. (Right now it is shown if either one of the paths moves over it). 

 

I'm having a hard time understanding how to make this work. I'd appreciate any help. Thanks!

 

Caroline 

See the Pen QWKEKmw by carolineportugal (@carolineportugal) on CodePen

[mikel]

Hey @Caroline_Portugal,

 

You could set .solid-blue to  visibility:hidden (CSS).

And then at the end of the timeline:  .to('.solid-blue', {autoAlpha:1})

 

Happy tweening ...

Mikel

[Caroline_Portugal]

Hey Mikel, thanks for the quick reply!

 

With what you're suggesting, the blue shape would only be shown at the final state of the two outlines intersecting. 

 

I need the blue shape to start being shown the instant the two outlines start intersecting—and only where the two shapes are intersecting.  

[mikel]

Hey Caroline,

 

OK. Perhaps these examples will give you a clue.
You need the element twice: with / without a mask (or clip-path).

 

See the Pen eKQRKM by mikeK (@mikeK) on CodePen

 

See the Pen PoPjXPE by mikeK (@mikeK) on CodePen

 

Happy masking ...

Mikel

 

 

[PointC]

Yeah - that's a little tricky. It would be super easy with mask-composite, but support for that is not good.

https://developer.mozilla.org/en-US/docs/Web/CSS/mask-composite

 

For now, I'd recommend a duplicate element and/or chopping things up a bit differently in the SVG to make things easier on yourself.

 

Happy tweening.

 

[Caroline_Portugal]

Thanks so much, guys. 

 

I tried duplicating and adjusting the path-shapes to get the effect I need, but it's not going to work. I guess I really need support for mask-composite.

Will use the suggestion from Mikel as an alternative take on this.