Jump to content
Search Community

Incremental animation issues on quick button clicks

CandyboxMarketing test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

Hello,

 

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.

https://greensock.com/docs/v3/GSAP/gsap.isTweening()

 

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()) {
  spin.progress(1);
}

https://greensock.com/docs/v3/GSAP/Tween/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...