Jump to content
Search Community

My animation stop working when I step into another window

davidCo test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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>

 

 

Link to comment
Share on other sites

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?

  • Like 3
Link to comment
Share on other sites

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?

 

:)

  • Like 2
Link to comment
Share on other sites

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>



  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...