[DrawSVG mask isn't initially masking the underlying path.]

Thank you so much, this indeed was the solution.

[DrawSVG mask isn't initially masking the underlying path.]

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.

[DrawSVG mask isn't initially masking the underlying path.]

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

[DrawSVGPlugin in Nuxt not working]

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.

[DrawSVGPlugin in Nuxt not working]

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.

[DrawSVGPlugin in Nuxt not working]

[DrawSVGPlugin in Nuxt not working]

Thanks OSUBlake. I don't I have

DrawSVGPlugin 

in

"gsap/dist/DrawSVGPlugin

It doesn't exist. Thoughts?

[DrawSVGPlugin in Nuxt not working]

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.

[DrawSVGPlugin in Nuxt not working]

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.

[Target SVG text on rollover on a card by card basis]

Thanks for the solution and quick reply, Jack.

[Target SVG text on rollover on a card by card basis]

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.

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

[Simple card flip code. One should work and doesn't; the other works and shouldn't. GSAP2 vs GSAP3?]

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.

[Simple card flip code. One should work and doesn't; the other works and shouldn't. GSAP2 vs GSAP3?]

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" });

 

[Len's flare]

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.

[Len's flare]

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.