SJH Posted November 13, 2021 Share Posted November 13, 2021 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 More sharing options...
GreenSock Posted November 13, 2021 Share Posted November 13, 2021 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 More sharing options...
SJH Posted November 13, 2021 Author Share Posted November 13, 2021 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 More sharing options...
GreenSock Posted November 13, 2021 Share Posted November 13, 2021 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. 1 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted November 13, 2021 Solution Share Posted November 13, 2021 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 More sharing options...
SJH Posted November 14, 2021 Author Share Posted November 14, 2021 Thank you so much, this indeed was the solution. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now