Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
dannol

Reversing timeline doesn't complete in some cases

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

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.

 

Link to post
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.

×