Jump to content

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

Tweening in click

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

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.