SJH

Thank you so much, this indeed was the solution.

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: https://codepen.io/sandalwoodsh/pen/PoKyNga 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: https://codepen.io/sandalwoodsh/pen/porxbVy 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: https://codepen.io/sandalwoodsh/pen/MWvPeXb There you go, I think this fully describes the issue I'm running into.

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.

It's working now. After I updated my Club Greensock account, I ran the npm install again: ./gsap-bonus.tgz from the command line. I checked the node_modules/gsap folder and the DrawSVGPlugin was listed. I guess it didn't work before because I had an expired ShockinglyGreen license. All seems good now. Thanks for you help OSUblake. Greensock has the best support. p.s. Thanks for your help too, Cassie.

OK. It seems my account was expired but even so when I run npm install ./gsap-bonus.tgz, nothing seems to change in my node_modules in the gsap folder.

Thanks OSUBlake. I don't I have DrawSVGPlugin in "gsap/dist/DrawSVGPlugin It doesn't exist. Thoughts?

I am using Club Greensock in production. That's what I'm saying...it's not working. Thoughts? I wouldn't have been able to go through the steps I listed above unless I was a Club Greensock member and I could download the tgz file.

Followed the instructions: npm install ./gsap-bonus.tgz from https://greensock.com/docs/v3/Installation?checked=core,drawSVG#esModules Included the following code in my nuxt component: import { gsap } from "gsap"; import { DrawSVGPlugin } from "gsap/DrawSVGPlugin"; if (process.client) { gsap.registerPlugin(MorphSVGPlugin); } When I execute: npm run dev, I get a dependency was not found error. This actually makes sense to me because when I look inside my node_modules/gsap/dist folder "DrawSVGPlugin" doesn't exist. I was previously using the non member/non plugin version of GSAP, if that makes a difference.

Thanks for the solution and quick reply, Jack.

I can change the color of each SVG 'card' but I'd like to target just the text within each SVG 'card'. Because I have a lot of cards to target, I don't want to give each text item within the SVG a unique identifier. I just want to be able to rollover each card and have GSAP only target the text of the current card. Thanks for the help.

Both of your replies are correct: I ran the GSAP 3 code ( gsap.to(targetObject, { duration: 2, rotationY: "+=180" }); today and it worked perfectly! OSUblake: yes, the syntax notes warned me the second solution was deprecated. Thank you both for your quick reply. Maybe this small thread can help someone else in the future.

I'm simply flipping a card but I don't understand why one line of code works and the other doesn't. Could someone please explain why this code in GSAP3 doesn't work: gsap.to(targetObject, { duration: 2, rotationY: "+=180" }); And this version does work, even though the to of gsap.to is struck out in VSC: gsap.to(targetObject, 2, { rotationY: "+=180" });

I took a look at this post: https://greensock.com/forums/topic/19429-flare-effect-with-trail/ I suppose something like that could create a light streaming effect if instead of the trails dancing around randomly, they all went out from a single point. Almost like a particle emitter. The look I'm going for would be more like sunbeams coming out of a light source. A lens flare would be great but maybe a little to complex.

Anyone know how I could create a lens flare animation. Basically I want to have two streams of different colored lights emanating from a single point. It would be great if both streams of lights changed over time.