Jump to content
Search Community

j4media

Members
  • Posts

    5
  • Joined

  • Last visited

j4media's Achievements

2

Reputation

  1. 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.
  2. 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>
  3. 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
  4. 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.
  5. 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
×
×
  • Create New...