[Toggle reverse and play]

In order for this to work for me I have to double click. it works fine with  play( ).    I'm adding an onclick  to actual svg element. I saw @Rodrigo   pen.. but its not working for in the DOM.  Anyone know how I can get it to work on a single click? 

 

This requires double click:

...
<rect id='myRect' onclick='toggleRect()' />
<script type="text/javascript">

  var tlb =  new TimelineMax({paused: true})
  
tlb.to('#myRect', 1, {opacity:1})
  
function toggleRect(){
    tlb.reversed() ? tlb.play() : tlb.reverse()
 }

.

 

This does not toggle but requires only one click.
 

...
<rect id='myRect' onclick='toggleRect()' />
<script type="text/javascript">

  var tlb =  new TimelineMax({paused: true})
  
tlb.to('#myRect', 1, {opacity:1})
  
function toggleRect(){
    tlb.play()
 }