mjjbuk Posted December 3, 2019 Share Posted December 3, 2019 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 More sharing options...
ZachSaucier Posted December 3, 2019 Share Posted December 3, 2019 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 More sharing options...
mjjbuk Posted December 3, 2019 Author Share Posted December 3, 2019 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 More sharing options...
mjjbuk Posted December 3, 2019 Author Share Posted December 3, 2019 Interestingly just seen another error on the plug-in itself. See attached. Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 3, 2019 Share Posted December 3, 2019 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 More sharing options...
mjjbuk Posted December 3, 2019 Author Share Posted December 3, 2019 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 More sharing options...
ZachSaucier Posted December 3, 2019 Share Posted December 3, 2019 Like I said, use the minified DrawSVG file instead. Link to comment Share on other sites More sharing options...
mjjbuk Posted December 3, 2019 Author Share Posted December 3, 2019 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 More sharing options...
ZachSaucier Posted December 3, 2019 Share Posted December 3, 2019 I'm happy to help if you get stuck and can create the error(s) in minimal form Happy tweening. Link to comment Share on other sites More sharing options...
mjjbuk Posted December 3, 2019 Author Share Posted December 3, 2019 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? Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 3, 2019 Share Posted December 3, 2019 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); Link to comment Share on other sites More sharing options...
GreenSock Posted December 3, 2019 Share Posted December 3, 2019 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? 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". 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 3, 2019 Share Posted December 3, 2019 Just now, GreenSock said: That's exactly what the "umd" directory has. Un-minified ES5 files (not modules). Ahhhh. Makes sense. Link to comment Share on other sites More sharing options...
mjjbuk Posted December 3, 2019 Author Share Posted December 3, 2019 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 More sharing options...
ZachSaucier Posted December 3, 2019 Share Posted December 3, 2019 No problem! It's new in GSAP 3 to prevent some errors. 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now