Jump to content
Search Community

davvyy00

Members
  • Posts

    6
  • Joined

  • Last visited

davvyy00's Achievements

0

Reputation

  1. 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
  2. I can't add click events, what I'm looking for is to click the eye then it animates Not inline click events either
  3. I just looked at your code pen, I am trying to animate groups layered inside the svg, not the entire svg
  4. 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
  5. 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
  6. <!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) }
×
×
  • Create New...