Yes It is self contained.
the issue was about to have multiple times the same svg in the same page, so the ids changed It and the script couldn't found the desire object,
We fixed It replacing the Ids with Classes
http://codepen.io/DavidCoTeam/pen/RaEoXr
thx for your attention!
<?xml version="1.0" encoding="utf-8"?>
<svg id="goodsIcon" width="48" height="48" x="0px" y="0px" xml:space="preserve" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
.goods-p1{fill:#FFF;scale:0; opacity:0;}
.goods-p2{fill:#FFF;scale:0; opacity:0;}
.goods-p3{fill:#FFF;scale:0; opacity:0;}
</style>
<g>
<path class="goods-p1" d="M20,9.5h-3V18h-5v-6.4H8V18H3V9.5H0L10,0L20,9.5z"/>
<path class="goods-p2" d="M10.4,8C8.2,7.4,7.5,6.8,7.5,5.8c0-1.1,1-1.9,2.6-1.9c1.7,0,2.4,0.8,2.5,2.2h2.2c-0.1-1.8-1.1-3.4-3.2-3.8V0 H8.6v2.2C6.7,2.6,5.2,3.8,5.2,5.8c0,2.3,1.9,3.5,4.6,4.1c2.5,0.6,2.9,1.5,2.9,2.4c0,0.7-0.5,1.8-2.6,1.8c-2,0-2.8-0.9-2.9-2.2H5 c0.1,2.3,1.7,3.5,3.6,3.8V18h2.9v-2.2c1.9-0.4,3.5-1.5,3.5-3.6C15,9.6,12.6,8.6,10.4,8z"/>
<path class="goods-p3" d="M11.9,10.7c1.8-0.7,3-2.5,3-4.5c0-2.7-2.2-4.9-4.9-4.9S5.2,3.5,5.2,6.2c0,2,1.2,3.7,3,4.5
c-3.4,0.5-7.8,2.2-7.8,5v3.9h19.5v-3.9C19.8,12.8,15.3,11.1,11.9,10.7z"/>
</g>
<script type="text/javascript">
<![CDATA[
if (!window.animateGoodsIcon) {
window.animateGoodsIcon= function() {
new TimelineMax().to('#goodsIcon path', 1, {scale:0,transformOrigin:"50% 50%"});
new TimelineMax({repeat:-1})
.to('.goods-p1', 4, {scale:1, opacity:1})
.to('.goods-p1', 0.4, {scale:1, opacity:0})
.to('.goods-p2', 4, {scale:1, opacity:1})
.to('.goods-p2', 0.4, {scale:1, opacity:0})
.to('.goods-p3', 4, {scale:1, opacity:1})
.to('.goods-p3', 0.4, {scale:1, opacity:0});
}
}
animateGoodsIcon();
]]>
</script>
</svg>