Jump to content
GreenSock

SJH

DrawSVG mask isn't initially masking the underlying path.

Go to solution Solved by GreenSock,

Recommended Posts

I'm essentially using the same code as what I have here in codepen but I'm using it in Nuxt.js. I have a base card component with many <svg>s; with one of the <svg>s housing the check mark path. The problem is, on npm run dev, the check mark, appears on every card. I want the check mark hidden until the user has selected and closed each card. Any thoughts? Seems quirky.

See the Pen OJjoGGm by sandalwoodsh (@sandalwoodsh) on CodePen

Link to comment
Share on other sites

First of all, thanks for being a Club GreenSock member @SJH!

 

It's super difficult to troubleshoot blind - can you provide a minimal demo, perhaps in CodeSandbox or something like that? It kinda sounds like you forgot to gsap.registerPlugin(DrawSVGPlugin) or something. 🤷‍♂️ Do you see any errors in the console? 

Link to comment
Share on other sites

If I remove the drawSVG call from JS, then the green check mark appears on screen because the mask's stroke color is set to "#ffffff". Because the mask is white everything underneath it will be fully visible. I don't want that. Here's the pen:

See the Pen PoKyNga by sandalwoodsh (@sandalwoodsh) on CodePen

I want the green check mark to be hidden i.e. not visible. So, I can set the stroke on the mask to "#000000". Now the check mark is hidden because the black mask is hiding everything. That's what I want. Here's the pen:

See the Pen porxbVy by sandalwoodsh (@sandalwoodsh) on CodePen

OK, so all I have to do is set the stroke color back to white (stroke: "#ffffff") when I call the drawSVG, but the result isn't what I expect:

See the Pen MWvPeXb by sandalwoodsh (@sandalwoodsh) on CodePen

There you go, I think this fully describes the issue I'm running into.

Link to comment
Share on other sites

Sure, I totally get the drawSVG effect - I guess I don't really understand what you're asking here. I don't see any issues in that CodePen you posted (other than, of course, needing to uncomment the drawSVG animation). 

 

Are you asking how to pause that tween so that it doesn't run until you call play(), for example? If so, you can simply add paused: true to your tween and then call .play() when you're ready. If you still need some help, please provide a minimal demo that clearly shows the problem and we'd be happy to take a peek. 

  • Like 1
Link to comment
Share on other sites

  • Solution

Ah, it looks like you edited your post after I posted my answer. 

 

Okay, so you want to instantly change the stroke color to white, but gradually do the drawSVG effect, right? Like this?: 

See the Pen bGrmeON?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Just use a .fromTo() tween or you could do a .set() initially to change the color and drawSVG value, and then a .to() (which is basically the same thing as a .fromTo()). 

Link to comment
Share on other sites

Thank you so much, this indeed was the solution.

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