My animation stop working when I step into another window

[davidCo 1 Likes (Newbie)]

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>

 

 

[davidCo 1 Likes (Newbie)]

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

[Carl 9,066 Likes (Superhero)]

Hi and welcome to the GreenSock forums,

 

hmm, i pasted your code into a CodePen and it seems to still work when I switch tabs.

 

http://codepen.io/anon/pen/NNePaZ

 

What exactly isn't supported in Edge and FIreFox? I tested in FireFox and it looked the same as Chrome.

Also its a little difficult to know what the code should be doing when the elements have cryptic IDs like #aa, #ab, #ac.

 

I think it will help if you can provide more details. Perhaps another member has an idea?

[OSUblake 9,990 Likes (Superhero)]

Is this self contained? Where's your script tag for TweenMax?

[Jonathan 5,176 Likes (Superhero)]

Based on your example code above.. it looks like you are not running this code within an html page. Since you are using the <xml> tag, which makes me presume it is a self contained in a standalone SVG file. Also you should really define your variables with var, meaning your new TimelineMax()

 

So is this self contained svg file outside an html page, like Blake asked above?

 

[davidCo 1 Likes (Newbie)]

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   

 

See the Pen RaEoXr by DavidCoTeam (@DavidCoTeam) on CodePen

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>