Jump to content
Search Community

Do Javascript files need to be embedded?

j4media 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

Hi All,

 

I'm new to GSAP and have a question.  Do I have to embed the entire TweenMax (and other plugins) code in each SVG I animate, or can I host the actual js files on my server and call them through my SVGs?  Reason I ask is adding the code to each SVG dramatically increases the file size.

 

Thanks in advance for your help!

 

John

Link to comment
Share on other sites

Nah, GSAP typically just needs to be loaded once on the web page. In most cases, people inline their SVG (embed it in the HTML) which ensures that it can easily tap into GSAP without any security issues, and there are fewer server requests (faster). Are you trying to embed JS inside each SVG file and loading it into <img> nodes or something? I believe it's possible to load JS into an SVG with a link too (similar to a <script> tag in HTML). It'd help if you had a demo or something we could peek at. But no, it's very unlikely that you'd need to embed TweenMax in a bunch of SVG files. I can't imagine a scenario that'd require that. 

  • Like 2
Link to comment
Share on other sites

thanks for the quick reply Jack.  Right now I've been pasting the code in my actual SVG file and then calling the SVG within <img> tags.  It makes much more sense to load it from the HTML.  I'll give that a shot and let you know if I have any issues.

  • Like 1
Link to comment
Share on other sites

Hi Jack,

 

I was able to successfully load the script files through my index.php file, but my animations are not working on the site.

 

Here's the confirmation that TweenMax and DrawSVG have loaded:

 

Browser Network Console

 

And here's my SVG code:


 

<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" id="svg2" viewBox="0 0 800 600">
<!-- 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>

 

I'm running my site on Joomla 3.8.3

 

If you want to take a look at my site, you can find it at http://www.j4home.us

 

The SVG that should be animating is the down arrow below the tagline "Let your home understand you..."

 

Any idea what I'm doing wrong or what the problem is?

 

Thanks for your help!

 

John

 

Link to comment
Share on other sites

Looks like the problem is that you're loading GSAP **after** your JavaScript is attempting to execute animations. In other words, when you call TweenMax.to(...), there is no such thing as TweenMax.

 

So just move your <script> tag that loads GSAP above your SVG. Also, there's no reason to have your animation code literally inside the <svg> element, wrapped in CDATA. You can just tuck that at the bottom of your HTML, after loading GSAP. I don't think it's "wrong" to do it the way you're doing it - just seems unnecessary and adds a little extra code. 

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

No no, if you load your SVG as an external asset like that, GSAP can't access the elements inside of it (for security reasons - it's a browser thing). I thought you were trying to embed the SVG inline in the HTML - that's what I'd strongly recommend. It is technically possible to do it as an external asset by either linking to GSAP from within your SVG or just injecting the SVG inline dynamically after it's loaded, but it's easier to just inline it from the start (at least in most cases). If you're still having trouble, it'd be super helpful if you could provide a codepen demo so that we can quickly identify the issue(s). 

 

Cheers!

  • Thanks 1
Link to comment
Share on other sites

Ah yes, I get it now!

 

I went the SVG inline in the HTML route as you recommend and it works perfectly now.  Thank You!!!!!!

 

My issue was using a custom template in Joomla that treated everything as an element, so I had to build each component as such.  For this animated SVG, I just used the HTML element and coded everything inline instead of calling the SVG via an image element.

  • Like 1
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...