Jump to content
Search Community

Incremental animation issues on quick button clicks

CandyboxMarketing test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts



I am working on an animation for a slider. The intent is for an element to rotate when the slider goes to the next or previous slide, with the rotation direction matching the slider direction.


The issue is if a user clicks again before the initial animation finishes, the box no longer rotates in a consistent 90deg and gets offset based on the progress of the animation in progress. How do I ensure the animation completes or stays with consistent 90deg rotations if a user clicks buttons during a previous animation?


In the actual version, the animation is tied to Slick.js "beforeChange" event to account for dots, arrows, swipes, etc.


Thanks in advance!


See the Pen poxKdJz by candybox (@candybox) on CodePen

Link to comment
Share on other sites

  • Solution

You could check if the target is is tweening and ignore the clicks.



Or give the tween a reference, say 'spin', and then force the progress to 1 if the user clicks too quickly and spin is still active. So the code would be something like this.

if (spin && spin.isActive()) {



Hopefully that helps. Happy tweening and thanks for being a club member.


  • Like 1
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.
  • Create New...