Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
SJH

DrawSVGPlugin in Nuxt not working

Go to solution Solved by SJH,

Recommended Posts

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.

Link to comment
Share on other sites

Hi there @SJH,

 

Sorry for the confusion. The DrawSVG plugin is a Club GreenSock perk.


If you're just looking to play around and kick the tires a bit, you can use all the bonus plugins for free over on codepen.

See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen



Also on CodeSandbox - which may be easier if you're also using nuxt

https://codesandbox.io/s/gsap-trial-bonus-plugins-m26x0

If you're looking to use DrawSVG in production - Club GreenSock is the way to go, the bonus plugins save a ton of development time and solve a lot of tricky problems for you, so I'm sure you'll get your money's worth ☺️ Happy to give you more info if you need.

Good luck with your project!

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Hi SJH,

 

Nuxt doesn't work with ES Modules by default. You'll have to manually config nuxt...

 

OR you can use the UMD files.

 

import { DrawSVGPlugin } from "gsap/dist/DrawSVGPlugin";

 

  • Like 1
Link to comment
Share on other sites

Thanks OSUBlake. I don't I have

DrawSVGPlugin 

in

"gsap/dist/DrawSVGPlugin

It doesn't exist. Thoughts?

Link to comment
Share on other sites

Screen Shot 2021-11-08 at 4.13.49 PM.png

Link to comment
Share on other sites

That doesn't look like the Club Greensock package.

 

14 hours ago, SJH said:

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.

 

You would be able to download a normal package even if you weren't Club Greensock member as that's how we currently distribute CustomEase, which is available to anyone who has a GreenSock account. Make sure you are logged into the correct account that is associated with Club Greensock before downloading. The account you are using right now is not a Club Greensock.

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Since you're not installing a Club Greensock package, the only difference you would see between a normal npm install and the .tgz one is the addition of CustomEase. Or are you saying you don't even have gsap folder in your node_modules folder?

 

 

Link to comment
Share on other sites

  • Solution

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.

  • Like 3
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.
×