davidCo

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>

also, isn't supported on firefox and edge. TnT

Hello, i'm new to GSAP please help, i'm trying to do this simple animation It works, but when I step into another window linked with same animation It stop working, doesn't start. (pd my english isn't good enough) <?xml version="1.0" encoding="utf-8"?> <svg class="skt8" 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"> .kt1{fill:#FFF;scale:0; opacity:0;} .kt2{fill:#FFF} </style> <g> <path id="aa" class="kt1" d="M20,9.5h-3V18h-5v-6.4H8V18H3V9.5H0L10,0L20,9.5z"/> </g> <g> <path id="ab" class="kt1" 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"/> </g> <g> <path id="ac" class="kt1" 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[ new TimelineMax().to('.skt8 path', 1, {scale:0,transformOrigin:"50% 50%"}); new TimelineMax({repeat:-1}) .to('#aa', 1, {scale:1, opacity:1}) .to('#aa', 0.4, {scale:1, opacity:0}) .to('#ab', 1, {scale:1, opacity:1}) .to('#ab', 0.4, {scale:1, opacity:0}) .to('#ac', 1, {scale:1, opacity:1}) ]]> </script> </svg>