Revealing an SVG using clipPath in same SVG

[radiator]

Hi All!

 

Having a helluva time trying to animate some paths in a defs tag to reveal other svg paths. 

 

Basic setup is, have a svg path, and then have some strokes that will reveal it when animated. It essentially looks like this ( abstracted ):

<!-- In HTML -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 516.8245 197.65855">
  <defs>
    <clipPath id="mask1">
      <path d="....." fill="none" stroke="#000000" stroke-linejoin="round" stroke-width="13"/>
    </clipPath>
    <clipPath id="mask2">
      <path d="....." fill="none" stroke="#000000" stroke-linejoin="round" stroke-width="12"/>
    </clipPath>
  </defs>
  <path clip-path="url(#mask1)"  d="....."/>
  <path clip-path="url(#mask2)" d="....."/>
</svg>

<!-- This is in my JS but basically... -->
<script>
// DOM references
const $mask1 = $('#mask1'),
      $mask2 = $('#mask2');

// Animation
const tl = new TimelineMax( { paused:true, smoothChildTiming:true } );
      tl.fromTo( $mask1, 1, { drawSVG:'0%' }, { drawSVG:'100%' });
      tl.fromTo( $mask2, 1, { drawSVG:'0%' }, { drawSVG:'100%' }, '-=0.5');

// Execute
tl.play();

</script>

When I remove the clipPath and defs, my mask paths do animate properly using drawSVG, ( doesnt mask anything of course, but animation works well ). 

 

As soon my 'masks' are wrapped in def / clipPath, there is no animation. The mask works, however, it is just blank. 

 

I read the pinned SVG Gotchas post like 10 times but couldn't find the answer.

 

I found answers that work with images like this post here, but not for svg's revealing paths within the same svg.

 

I found an example attempting to do exactly what i want here, but it did not work... Played with this one especially at length to no avail.

 

I also read that article referenced from the previous article on css-tricks to no avail to my problem. Even when using the AttrPlugin.

 

During my frustrations, I've been able to log out that lengths are being calculated, the libs / plugins are loaded properly and exist, but just can't for the life of me get it to work. 

 

Any help here would be greatly appreciated.

 

Thank you in advance! Always get the best advice here!

[OSUblake]

Make a demo.

[radiator]

Boiled it down to the simplest possible form here: 

See the Pen mAEyXx by radiator1 (@radiator1) on CodePen

 

Trying to get the red line to mask the black and turn into a black line.

 

Thank you so much for any assistance!

 

J

[OSUblake]

Are you trying to do a clipPath or a mask? For a mask to work, you need to set it's stroke to white. Is this what you're trying to do?

See the Pen pEbvYv by osublake (@osublake) on CodePen

[radiator]

BOOM!

 

OSUblake, you are the man!

 

Lessons learned:

 

1) Use mask over defs > clipPath when you want to use paths to mask paths

2) If using a stroke to reveal a complex vector beneath it, be sure its stroke is set to white

 

Awesome, thank you so much! Problem solved!

 

Apples to apples modified codepen here: 

See the Pen pEbJzJ by radiator1 (@radiator1) on CodePen

  

[OSUblake]

Nice! You can put your masks in the <defs> if you want. It really doesn't matter as it's not going to be rendered. Also, I posted a gotcha today about masks being clipped in case you missed it.

http://greensock.com/forums/topic/13681-svg-gotchas/?p=65150

[radiator]

Nice! You can put your masks in the <defs> if you want. It really doesn't matter as it's not going to be rendered. Also, I posted a gotcha today about masks being clipped in case you missed it.

http://greensock.com/forums/topic/13681-svg-gotchas/?p=65150

 

Awesome, thank you! Went back and brushed up on the mask specs a bit more. I've solved the problem in production, which despite it being a large set of mask reveals, was easy once I got the basics down. Thanks again!