To try and troubleshoot further, I tried to make this work in a simple HTML file, as per your suggestion above, I loaded TweenMax and DrawSVG in the header -- here's the html: Don't know if this makes a difference, but I noticed in the browser network console that although TweenMax.min.js and DrawSCGPligin.min.js say finished under status, the size of each is 0 B.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="svg.css">
<script src="js/TweenMax.min.js"></script>
<script src="js/DrawSVGPlugin.min.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>animated SVG test</title>
</head>
<style>
body {background-color: powderblue;}
</style>
<body style="text-align:center;">
<object>
<embed src="down_arrow_test.svg" width="50px">
</object>
<p>This is some text</p>
</body>
</html>
Doing it this way, I still get no animation and in my browser console I get the error:
Uncaught ReferenceError: TweenMax is not defined at down_arrow_test.svg:29
For reference, here's the down_arrow_test.svg code again:
line 29 is TweenMax.to(arrow, 1, {opacity:0, repeat:-1, yoyo:true});
<svg xmlns="http://www.w3.org/2000/svg" width="437.288" height="300" id="svg2" viewBox="0 0 400 400">
<!-- Enter Special Styling and Masks below -->
<defs>
<style>
</style>
</defs>
<!-- Copy SVG below -->
<path d="M206.16 250.899L9.545 58.973C-2.968 46.764-3.21 26.728 9.006 14.226c12.203-12.502 32.239-12.744 44.74-.54L227.719 183.51 397.533 9.537c12.209-12.502 32.242-12.744 44.745-.54 12.507 12.204 12.749 32.24.54 44.747l-191.923 196.62c-6.105 6.25-14.158 9.433-22.252 9.53-8.099.099-16.232-2.894-22.484-8.995z" id="arrow" fill="#4d4d4d"/>
<!-- Begin Animation Plugins -->
<script type="text/javascript">
<![CDATA[
//START ANIMATION HERE
// var circle = document.getElementById('circle');
// var line = document.getElementById('line');
var arrow = document.getElementById('arrow');
// TweenMax.fromTo(circle, 1, {x: -200}, {x:200});
// TweenMax.to(circle, 1, {x:400, y:200, repeat:-1, yoyo:true});
// TweenMax.to(line, 1, {opacity:0, repeat:-1, yoyo:true});
TweenMax.to(arrow, 1, {opacity:0, repeat:-1, yoyo:true});
]]>
</script>
</svg>