Jump to content
GreenSock

radiator

Revealing an SVG using clipPath in same SVG

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • Solution

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

  • Like 3
Link to comment
Share on other sites

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

  

Link to comment
Share on other sites

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!

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.
×