Jump to content

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

Tweening in click

Recommended Posts

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

Link to comment
Share on other sites

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


  • Like 5
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.