Heres a link to the current situation (click the burger icon):
http://stan.at/stansPlayground/
following this advice: https://stackoverflow.com/questions/2296097/making-an-svg-image-object-clickable-with-onclick-avoiding-absolute-positioning
I am calling a function from my SVG file:
<svg onclick="openAbout()" width="100%" height="100%" viewBox="0 0 738 781" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<script xlink:href="/stansPlayground/scripts/scripts.js" />
<g transform="matrix(1,0,0,1,-628.921,-608.872)">
<g>...
this is my SVG object in index.html:
<div id="navIconHolder" class="mainMenuIconHolder"> <object id="burgerSVG" class="mainMenuIconSVG" data="content/main/menu_burger_01.svg" type="image/svg+xml"></object> </div>
scripts.js:
function openMenu(){
console.log("openMenu")
const timelineOpenMenu = new TimelineMax({repeat: -1});
timelineOpenMenu.fromTo(mainMenuWindow,1,{x:0},{x:200});
}
and I get ReferenceError: TimelineMax is not defined
I have the CDNs linked and a TimelineMax works if I call it within script tags from index.html:
<script>
window.addEventListener("load", function(){
var tl = new TimelineMax({});
tl.to("body",.3,{backgroundColor:"blue"});
})
</script>
so i guess its a matter of getting the files linked properly, but I cant work it out.