Jump to content
GreenSock

fernandofas

DrawSVG not working again

Recommended Posts

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

HI @mikel,

 

I register the plugin and still not working.

I'm attaching the files again and a screenshot.

 

Thank you,

 

Fernando

Screenshot 2020-01-09 at 13.52.13.png

draw.zip

Link to comment
Share on other sites

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

Hey fernandofas and welcome.

 

Three issues:

  1. 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
  2. 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.
  3. 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!

  • Like 3
  • Thanks 2
Link to comment
Share on other sites

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

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.

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