Jump to content
GreenSock

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

How to activate draw SVG plugin?

Recommended Posts

Hi, just signed up to a GS membership to use the drawSVG plugin, but having trouble getting it working. 

I'm loading tweeMax from a cdn first and then after it link to the drawSVG script file, but it's not working ...

Screenshot 2020-02-13 at 17.14.27.png

Share this post


Link to post
Share on other sites

Hey Andrew. Welcome to the GreenSock forums and Club GreenSock! We're so glad you decided to join us.

 

I'm betting that there are two issues at play here:

  1. DrawSVGPlugin that you're using is likely for GSAP version 3 but you're loading GSAP 2. So load GSAP 3 instead: https://cdn.jsdelivr.net/npm/gsap@3.1.1/dist/gsap.min.js
    Alternatively, you can download the GSAP 2 version on your account dashboard
  2. Make sure the DrawSVGPlugin file name is correct (and the path to it is also correct if necessary). The default name of the file is DrawSVGPlugin.min.js, so unless you changed it, that also needs to be changed.

I also recently made a video to help you get things up and running (soon to be public but here's a sneak peak): 

 

 

I highly recommend our installation page for more details.

  • Like 3

Share this post


Link to post
Share on other sites

Hej!

due to our workflow i came across the following problem:

i want to load gsap via cdn but import a paid plugin as module.

 

Is a mix between both even possible?

 

so i would have

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>

in my markup, and

import { DrawSVGPlugin } from '@/js/vendors/gsap/plugins/DrawSVGPlugin';

(@ is just an alias to my src-dir).

 

anyway it seems i can't get this to work. 😱

Share this post


Link to post
Share on other sites

So for anyone running across the same problem as i had (my sight was much clearer after lunch), this is the solution:

Follow the instructions as written in the docs

that is, download the zip, place the gsap-bonus.tgz file in your project root, install it with:

npm install ./gsap-bonus.tgz

 and in your frontend:

import { gsap } from "gsap";
import { PixiPlugin } from "gsap/PixiPlugin.js";

(or whatever plugin you're in need of).

 

so this will include the plugins and gsap in your bundle. if you want to use the gsap from the cdn instead, you need to include it first in a script tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>

and in your webpack-config:

module.exports = {
  ...
  externals: {
      gsap: 'gsap',
  },
  ...
}

this will tell webpack not to include gsap in your bundle as it will be served from outside.

 

 

🎡🙌🏼🤪☄️🍕 gsapaliciouuuus

  • Like 3

Share this post


Link to post
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.

×