Jump to content
Search Community

How to activate draw SVG plugin?

andrewandopen test
Moderator Tag

Recommended Posts

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
Link to comment
Share on other sites

  • 1 month later...

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. 😱

Link to comment
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
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.
×
×
  • Create New...