Jump to content
GreenSock

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

Using Draw SVG in Google web designer

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.

Share this post


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

Share this post


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

 

Share this post


Link to post
Share on other sites

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

Screen Shot 2019-12-03 at 17.15.47.png

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

Like I said, use the minified DrawSVG file instead.

Share this post


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

Share this post


Link to post
Share on other sites

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

 

Happy tweening.

Share this post


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

Share this post


Link to post
Share on other sites

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);

Share this post


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

Share this post


Link to post
Share on other sites
Just now, GreenSock said:

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

Ahhhh. Makes sense.

Share this post


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

Share this post


Link to post
Share on other sites

No problem! It's new in GSAP 3 to prevent some errors. 

  • Like 3

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×