Reversing timeline doesn't complete in some cases

[dannol]

I'm wondering if anyone has seen this or knows something I could try to fix it. I am flipping a card over and animating it to the center using a timeline. To return it to its former position, I reverse the timeline. Most of the time it works great, but in 5-10% of the cases, the timeline will not complete all the steps when reversed. Sometimes the card gets "stuck" in the center of the screen or the z-index isn't set back to default.

 

To demonstrate, go to this site: http://gaylord.dluxstudio.co/home.html. Click on the "Brain" card and then any other card to show the flip. Clicking the "X" reverses the flipped card animation.

 

My technique is to iterate through the child cards, creating a new timeline:

var tl = new TimelineLite({paused:true});

tl
  .add('grow', 0)
  .set(element, {className:'+=flipped'})
  .set(element, {zIndex:999})
  .to(element, 0.05, {width: flippedWidth, height: flippedHeight, x: leftOffset, y: topOffset}, 'grow')
  .add('flip', 'grow+=0.15')
  .to(frontCard, 0.35, {rotationY:180}, 'flip')
  .to(backCard, 0.35, {rotationY:0}, 'flip')
  .to(element, 0.35, {z:50}, 'flip')
  .to(element, 0.35, {z:0}, 'flip+=0.15');

I then add the timeline to the element using:

element.animation = tl;

When the "X" button is clicked I reverse the animation:

card[0].animation.reverse();

If there is a better way to reverse these timelines, I'd love to know. I really can't figure out why only in some cases the reversed timeline does not complete all the steps.

 

Thanks for any help you might have for me.

 

[dannol]

After a little more digging on the forums, this post completely solved my problems:

 

http://greensock.com/forums/topic/7803-animation-reverse-not-completing-after-a-few-plays/?p=29776

 

Thanks Rodrigo!