fernandofas Posted January 9, 2020 Share Posted January 9, 2020 Hi guys, I'm replicating this pen locally and there is no way I can make it to work. The console msgs are: index.html:42 Uncaught ReferenceError: gsap is not defined at index.html:42 (anonymous) @ index.html:42 DrawSVGPlugin.js:138 Uncaught SyntaxError: Unexpected token 'export' And this is my index.html file: <!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> <style> body{ background-color:grey; } #hover{ position:absolute; width:200px; top:30px; left:30px; cursor:pointer; } svg{ position:relative; width:200px; } </style> </head> <body> <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p> <![endif]--> <div id="hover"> <svg id="ball" viewBox="0 0 82 82"> <circle cx="41" cy="41" r="25" fill="green"/> <circle class="dash" cx="41" cy="41" r="30" fill="none" stroke-dasharray="5" stroke="green" stroke-width="2"/> </svg> </div> <script> var basic = gsap.timeline({repeat:-1, repeatDelay:1}) //.to('.stroke', {autoAlpha:0, duration:0.5}) .to('.dash',{rotation:120, transformOrigin:"center center", strokeDasharray:6, duration:3, ease: "power4.out"},0) .to('.dash',{rotation:-120, transformOrigin:"center center", duration:3, ease: "none"}) .to('.dash',{strokeDasharray:0, duration:3, ease: "power4.out"},'-=2') </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script> <script src="DrawSVGPlugin.js"></script> </body> </html> I'm a business club member. Is there anything that I'm doing wrong or the new gsap is just not getting the parameters? Any help will be appreciate. Kind regards, Fernando Fas draw.zip See the Pen NWPYvvg by fernandofas (@fernandofas) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted January 9, 2020 Share Posted January 9, 2020 Hey @fernandofas, Please use this link https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js See install helper here Don't forget to register the plugin like this in your project: gsap.registerPlugin(DrawSVGPlugin); Happy using gsap 3.0 ... Mikel Link to comment Share on other sites More sharing options...
fernandofas Posted January 9, 2020 Author Share Posted January 9, 2020 HI @mikel, I register the plugin and still not working. I'm attaching the files again and a screenshot. Thank you, Fernando draw.zip Link to comment Share on other sites More sharing options...
mikel Posted January 9, 2020 Share Posted January 9, 2020 Hey Fernandofas, By the way this animation doesn't need a drawSVG.plugin. The effect is achieved by different strokeDasharray values. Please check whether you have downloaded DrawSVGPlugin3 ! Otherwise use the direct link https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js Kind regards Mikel Link to comment Share on other sites More sharing options...
fernandofas Posted January 9, 2020 Author Share Posted January 9, 2020 Hi Mikel, Thanks for the info, but I'm trying to draw a svg file locally and any other svg that I place is giving me error. If I use the cdn that you provided is not gonna work locally, just on codepen. See file attached. Cheers, Fernando draw.zip Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 9, 2020 Share Posted January 9, 2020 Hey fernandofas and welcome. Three issues: You have a script tag that tries to use GSAP and DrawSVGPlugin before the script tag where you load them - whoops! Make sure that you load GSAP and DrawSVGPlugin first. Second, it looks like you're trying to use the module version of DrawSVGPlugin. You should use the UMD version instead as it's meant to be loaded via a script tag like you have. Once you have everything loaded correctly, you get an error about tl being undefined. Just add something like var tl = gsap.timeline() before you use tl for that to be fixed. Happy tweening! 3 2 Link to comment Share on other sites More sharing options...
fernandofas Posted January 9, 2020 Author Share Posted January 9, 2020 Thank you ZachSaucier. Seems like it's working now. Do I always need to use the umd version of the plugins for my projects? Cheers, Fernando Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 10, 2020 Share Posted January 10, 2020 22 hours ago, fernandofas said: Do I always need to use the umd version of the plugins for my projects? If you're loading it via a script tag or in something that requires UMD files (like Vue.js), yes. If you're using a different build tool that requires modules (like React, etc.) then you would use the modules version instead. Our Installation page has more details. 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