Share Posted June 8, 2018 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Play animations</title> <meta name="description" content="The HTML5 Herald"> <meta name="author" content="SitePoint"> <link rel="stylesheet" href="css/app.css"> <script src="gsap/GSDevTools.js"></script><!-- Remove dev only --> <script src="gsap/TimelineMax.js"></script><!-- maybe use lite version --> <script src="gsap/TweenMax.js"></script><!-- maybe use lite version --> <script src="gsap/MorphSVGPlugin.js"></script><!-- maybe use lite version --> <script src="js/animate.js"></script> </head> <body> <div class="damage-wrapper"> <object data="assets/sedan.svg" type="image/svg+xml" id="car-damage" width="100%" height="100%"></object> </div> </body> </html> window.onload = function() { var obj = document.querySelector(".damage-wrapper object") var wrapper = document.querySelector(".damage-wrapper") var svgDoc = obj.contentDocument debugger var carSvg = svgDoc.querySelector('svg') var part = svgDoc.querySelector('#right-back-door') var part2 = svgDoc.querySelector('#right-back-panel') var animateCarSvg = function(elementId, animation, duration, svg, svgDoc){ var groups = elementId.match(/#(.)/); var effectId = groups[0] var tl = new TimelineMax({id: effectId}) var carPart = svgDoc.querySelector(elementId) var clonePart = carPart.cloneNode(true) svg.insertBefore(clonePart, svg.firstChild); clonePart.addEventListener('click', function(){ console.log(clonePart) tl.to(clonePart, duration,animation) }) carPart.addEventListener('click', function(){ console.log(carPart) tl.to(carPart, duration,animation) }) } animateCarSvg('#right-back-panel', {x: 500}, 5, carSvg, svgDoc) } Link to comment Share on other sites More sharing options...
Share Posted June 8, 2018 I assume you're trying to reach inside of an external SVG file that's loaded onto the page, and animate individual elements that exist inside, right? For security reasons, browsers don't allow that. You need to inject the SVG into the DOM itself. 2 Link to comment Share on other sites More sharing options...
Author Share Posted June 9, 2018 Whats the security issue? The svg file is being delivered from the the same server as the application, I can animate this file if I don't layer the svg, but can't animate when I layer the svg into groups background etc Link to comment Share on other sites More sharing options...
Share Posted June 9, 2018 An svg inside an image is a security issue, but an svg inside an object is OK. But what's the point if you have to go through all that trouble? More conventional methods of accessing an SVG : Inlining it jQuery - http://plnkr.co/edit/khmnvLO3JfWRTkSuami4?p=preview XHR - http://plnkr.co/edit/c1cHZKzolHdz6nNEcvtZ?p=preview Fetch See the Pen MXJwXR by osublake (@osublake) on CodePen 6 Link to comment Share on other sites More sharing options...
Author Share Posted June 9, 2018 Ok thanks for the info, I just like the syntax of the object tag it's much neater than throwing a blob of svg into the code Link to comment Share on other sites More sharing options...
Author Share Posted June 11, 2018 I just looked at your code pen, I am trying to animate groups layered inside the svg, not the entire svg Link to comment Share on other sites More sharing options...
Share Posted June 11, 2018 Yep, @OSUblake's solution works exactly for that - here's a forked version that only animates the eye groups: See the Pen 5db7b6d77464da0b5aba45044890b72f by GreenSock (@GreenSock) on CodePen Is that what you're looking for? 2 Link to comment Share on other sites More sharing options...
Author Share Posted June 11, 2018 I can't add click events, what I'm looking for is to click the eye then it animates Not inline click events either Link to comment Share on other sites More sharing options...
Share Posted June 11, 2018 Sure, that's totally possible (unless I'm misunderstanding what you mean by "not inline click events either"). I updated the codepen: See the Pen 5db7b6d77464da0b5aba45044890b72f?editors=0010 by GreenSock (@GreenSock) on CodePen Is that what you mean? (click to start the eye animations) 2 Link to comment Share on other sites More sharing options...
Author Share Posted June 11, 2018 yes this is what I wanted, thank you, the problem seemed to be that it didn't work if I exported the svg from illustrator as a artboard it did not work, when I exported as a asset the animation worked, I am using the object syntax too, so using an object works Link to comment Share on other sites More sharing options...
Share Posted June 11, 2018 Great, so you're all set? Just making sure you don't need anything else. Happy tweening! Link to comment Share on other sites More sharing options...
Share Posted October 15, 2018 On 6/8/2018 at 7:11 PM, GreenSock said: I assume you're trying to reach inside of an external SVG file that's loaded onto the page, and animate individual elements that exist inside, right? For security reasons, browsers don't allow that. You need to inject the SVG into the DOM itself. I have hired someone to help me crank out some TweenMax animations. I'm using 1 SVG that has been grouped and exported per this thread. https://greensock.com/forums/topic/18010-better-adobe-illustrator-svg-exports-make-gsap-animating-easier/ Just like this post, I need to animate inside 1 SVG. My freelancer says that he needs to "inject the SVG into the DOM" like you mention. He's using SVG-Injector frrom 2014-2015, which worries me. Is this the only way to solve? Also, It's not clear to me if the tiger codepen uses an injector or if that is an alternative to "injecting the SVG into the DOM". What I DO know is that the Illustrator Export workflow works very well and I'd like to keep that. Here is the codepen without svg-injector and transition/mouseover layers (ie blue boxes) visible. https://codepen.io/yayaCreates/pen/yRXNxE/ Do I advise him to use svg-injector or do I offer up an alternative, knowing that we are exporting a layered Illustrator file? Link to comment Share on other sites More sharing options...
Share Posted October 15, 2018 Note: I decided to copy/paste the SVG code directly into my index.html file instead of using img src or object. I'm not sure if that is best practice but it helps me start tweening while I await your advice. Thanks for your time! Link to comment Share on other sites More sharing options...
Share Posted October 15, 2018 Pasting the SVG code will work well. And if it's not a maintenance hassle, should give you better performance than an 'injector'. 3 Link to comment Share on other sites More sharing options...
Share Posted October 15, 2018 If it's not going to change, I prefer to paste the SVG code into the HTML. Most code editors allow you to twirl it up and hide it while working so even if it's 100's of lines long, you don't have to stare at it as you scroll up and down your code. If it's dynamic and the needed SVG will depend on some user interaction, then yes, you'll probably want to inject it. It sounds like yours won't be changing though so I say paste it and call it a day. Just my two cents. YMMV. 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now