Jump to content
Search Community

davvyy00

Members

  • Posts

    6

  • Joined

  • Last visited

 Content Type 

Posts posted by davvyy00

    Can't tween/move groups inside an svg object

    in GSAP

    Posted 

    <!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...