Tweening in click

[Anya]

Hi guys!

Hoping to get some help on the current issue.

 

I have a flip card that rotates 180 deg on each click. And depending on what dot  a user clicks, the corresponding image is being used for the face of the card.

The issue I have is that if a user clicks before the previous tween animation finishes, the rotation value gets added and then card rotates a little more. 

I would like on each click for the card to make a complete 180 rotation and probably prevent clicks if the card is still animating.

How would I go about this?

I'm using relative values '+=180' because absolute values were not giving me the result and IE was not cooperating either, only with relative rotation value I got a full effect of a 3d card cross browsers compatible.

I have also tried to check if(!tl.isActive()) {} but didn't seem to give me the correct boolean..

Any advice is appreciated!

Thank you!

 

See the Pen vppbVY?editors=1010 by slyka85 (@slyka85) on CodePen

[OSUblake]

Hi @Anya

 

You need to save a reference to a timeline if you want to check if it's active.

 

See the Pen XVErEV by osublake (@osublake) on CodePen

 

[Anya]

@OSUblake, works like a charm. Thank you, Blake.