Jump to content
GreenSock

Caroline_Portugal

How to animate the intersection of paths

Go to solution Solved by PointC,

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.  

Link to comment
Share on other sites

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

 

 

  • Like 3
Link to comment
Share on other sites

  • Solution

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.

:)

 

  • Like 2
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×