Jump to content
Search Community

DrawSVG not working again

fernandofas test

By fernandofas
in GSAP

Moderator Tag
 Share

Recommended Posts

fernandofas test

fernandofas

Posted
Posted

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
ZachSaucier test

ZachSaucier

Posted
Posted

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
ZachSaucier test

ZachSaucier

Posted
Posted
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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...