Jump to content
Search Community

Using Draw SVG in Google web designer

mjjbuk test
Moderator Tag

Recommended Posts

Hi there - beginner with DrawSVG so please bear with me. I'm trying to use GSAP and the drawSVG plugin in Google web designer but I'm getting some run time errors in the browser.

 

Firstly i'm importing GSAP3 from Google servers and the DrawSVG plugin locally here:
 <script id="js-gsap" src="https://s0.2mdn.net/ads/studio/cached_libs/gsap_3.0.1_min.js"></script> 

<script id="drawSVG" src="DrawSVGPlugin.js"></script>  (Google don't host this plug-in yet)

 

Secondly i'm trying to animate the target SVG with the following code:
//draws all elements with the "draw-me" class applied with staggered start times 0.1 seconds apart
tl.from(".draw-me", {
  duration: 1,
  stagger: 0.1,
  drawSVG: 1
});

The error i get in all browsers is:
gsap_3.0.1_min.js:10 Invalid Invalid drawSVG tween 1. Missing plugin? gsap.registerPlugin() tween of undefined Missing plugin? gsap.registerPlugin()

Even though I can see the plugin has been included in the packaged file when I preview in Google Web designer. 

 

Am i missing something obvious?

Thank you.

Link to comment
Share on other sites

Hey mjjbuk and welcome to the GreenSock forums. Thanks a lot for being a Business Green member! We couldn't do what we do without people like you.

 

6 minutes ago, mjjbuk said:

Google don't host this plug-in yet

As it shouldn't :) DrawSVG is a Club GreenSock plugin and shouldn't be publicly available for anyone to use on Google's CDN.

 

7 minutes ago, mjjbuk said:

Invalid drawSVG tween 1. Missing plugin? gsap.registerPlugin()

This means that DrawSVG is failing to load. Check the resources panel of your dev tools to confirm that this is the case.

 

8 minutes ago, mjjbuk said:

drawSVG: 1

What's your purpose in putting 1 here? 0 would be from the very start.

Link to comment
Share on other sites

16 minutes ago, ZachSaucier said:

Hey mjjbuk and welcome to the GreenSock forums. Thanks a lot for being a Business Green member! We couldn't do what we do without people like you.

 

As it shouldn't :) DrawSVG is a Club GreenSock plugin and shouldn't be publicly available for anyone to use on Google's CDN.

Understood :)

 

This means that DrawSVG is failing to load. Check the resources panel of your dev tools to confirm that this is the case.
Just checked, It's def listed in the resources panel.

 

What's your purpose in putting 1 here? 0 would be from the very start.
Error on my part. Thanks.

 

Link to comment
Share on other sites

50 minutes ago, mjjbuk said:

Interestingly just seen another error on the plug-in itself. See attached.

Ah, there's the problem. I'm guessing you're loading the module version of DrawSVG. Try uploading and loading the minified version instead.

 

@GreenSock I still think we should have a /debug directory in the downloads zip that has the un-minified but compiled (non-module) files.

Link to comment
Share on other sites

9 minutes ago, ZachSaucier said:

Ah, there's the problem. I'm guessing you're loading the module version of DrawSVG. Try uploading and loading the minified version instead.

 

@GreenSock I still think we should have a /debug directory in the downloads zip that has the un-minified but compiled (non-module) files.

Thanks that fixed the line 138 unexpected keyword 'export' error. I still get the 2 gsap errors though.

Link to comment
Share on other sites

3 minutes ago, ZachSaucier said:

Like I said, use the minified DrawSVG file instead.

That's what i did. And it fixed the 'line 138 unexpected keyword 'export' error' but not the other two errors. I'll keep trying things myself, I don't want to take up your time. Thanks.

Link to comment
Share on other sites

1 minute ago, ZachSaucier said:

I'm happy to help if you get stuck and can create the error(s) in minimal form :) 

 

Happy tweening.

I maybe confused buy what you're asking me but i'm still getting the attached errors using the min files. Is this what you mean?

Screen Shot 2019-12-03 at 18.42.01.png

Link to comment
Share on other sites

37 minutes ago, ZachSaucier said:

@GreenSock I still think we should have a /debug directory in the downloads zip that has the un-minified but compiled (non-module) files.

That's exactly what the "umd" directory has. Un-minified ES5 files (not modules). 

 

4 minutes ago, mjjbuk said:

'm still getting the attached errors using the min files. Is this what you mean?

Screen Shot 2019-12-03 at 18.42.01.png

That means you haven't loaded DrawSVGPlugin or maybe you forgot to gsap.registerPlugin(DrawSVGPlugin). It's basically GSAP's way of saying "hey, you're trying to animate a property named 'drawSVG' but I see no such property and there's no plugin registered that handles that property either". 

  • Like 1
Link to comment
Share on other sites

6 minutes ago, ZachSaucier said:

Check the load order - is GSAP being loaded before DrawSVGPlugin?

 

Also in your custom script (that has the drawSVG tween in it) make sure to register it before trying to use it: gsap.registerPlugin(DrawSVGPlugin);

 

This did it - My apologies, I didn't realise i had to register a plug-in in this way. Really appreciate your time.

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