Jump to content
Search Community

Call TimelineMax from SVG file: Reference Error (CDNS linked) (link to problem included)

mechaniac test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.  

 

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