Steps to use DrawSVG when using Visual Studio Code on a ReactJS Project

[erict93]

So I've tried following the installation instructions but nothing makes sense. I didn't have a .npmrc file so I just made one. I don't know if that's correct or not. I followed the instructions for the gsap-bonus.tgz file and it worked one time and stopped working so I know everythings in there correctly. The only problem is I don't understand how to register my club greensock membership. I'm using visual studio code and have been using the command line implemented in it. can someone give me the exact syntax I need to use? I'm using npm. thanks. 

 

[GreenSock]

Hi @erict93. Thanks for being a Club GreenSock member!

 

I deleted the image you attached because it had your unique token in it (which anyone could steal and piggyback on your account). 

 

First let me explain that there are multiple ways to get the bonus files into your project:

1. Download the zip and use the files from in that zip (literally drag them into your project - they're just like any other JS file - you can load them with a simple <script> tag, and in this case I'd probably use the "minified" files but we provide ES modules and raw source too just in case you want those).
2. Drag the gsap-bonus.tgz file (from the zip download) into your project directory, and then open your console and run "npm install ./gsap-bonus.tgz". That's it! 
3. Use the private NPM repository. This involves setting up a .npmrc file.

It sounds like you tried to do BOTH 2 and 3 which is definitely not what we'd recommend. Just choose ONE of the methods above. In your case, it sounds like it might be easiest to just drop the gsap-bonus.tgz file into your project directory and run "npm install ./gsap-bonus.tgz". 

 

Maybe try uninstalling everything and start over, just to be safe. It's up to you. But again, I'd recommend just doing #2 above. All installation methods are described at https://greensock.com/install 

[erict93]

Thanks for deleting that screenshot I didn't even think of that. I npm uninstalled everything and did what you said in 2. and it still didn't work. When I'm importing the DrawSVG plugin how should I go about importing it? This is a react project btw.

[GreenSock]

The imports would look like:

import gsap from "gsap";
import DrawSVGPlugin from "gsap/DrawSVGPlugin";

gsap.registerPlugin(DrawSVGPlugin); // <- don't forget to register the plugin!

There's an interactive code builder on the install page at https://greensock.com/install that may help with that too. 

 

Any details you can provide beyond "it doesn't work" would be great - like are you getting an error message? What does it say? Can you provide a minimal demo, like in CodeSandbox? Here's a React one you can fork: 

https://codesandbox.io/s/elated-http-eo9ibf?file=/src/App.js

[erict93]

Here's the project if you want to clone it or take a look at it.

 

[-REDACTED-]

 

The drawsvg portion is in src/components/Home/logo/index.js. 

 

I'm not getting any errors so that's why I think it's a registration issue. 

 

 

[GreenSock]

I removed the link to the repo because once again you shared all the bonus files directly in your repo (so anyone else can easily grab them without getting the proper membership) 😯

 

I downloaded your code and tried to compile and there are errors, like: 

ERROR in ./src/components/Skills/index.js 10:0-43

Module not found: Error: Can't resolve 'react-tags-canvas' in '../EricTilton-master/src/components/Skills'

 

If I try to install that package, there are more errors about the dependency tree, like: 

Could not resolve dependency:
peer react@"^16.8.0" from react-tags-canvas@1.0.1

So I can't even look at your project unfortunately due to all the compiling errors that are unrelated to GSAP. 

 

But I wonder if you're getting bitten by the React 18 double-useEffect()-call issue in Strict Mode. Try replacing your useEffect() call with this which is identical except that you're wrapping it in a gsap.context() that makes it simple to revert things: 

useEffect(() => {
  gsap.registerPlugin(DrawSVGPlugin);

  let ctx = gsap.context(() => {
    gsap
      .timeline()
      .to(bgRef.current, {
      duration: 1,
      opacity: 1,
    })
      .from(outlineLogoRef.current, {
      drawSVG: 0,
      duration: 20,
    })

    gsap.fromTo(
      solidLogoRef.current,
      {
        opacity: 0,
      },
      {
        opacity: 1,
        delay: 4,
        duration: 4,
      }
    )
  }, bgRef);

  return () => ctx.revert();
}, [])

If you want background information on why from() calls expose problems in React 18's behavior, see this thread. But we built gsap.context() to resolve stuff like that. I'd strongly recommend reading our React article here too: 

I hope that helps!

[erict93]

It worked! Thank you!