<!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)
}