Jump to content
GreenSock

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

Handle Hover in Middle of Rotating Animation

Recommended Posts

Hi,

first post. Hope i haven't overlooked something obvious.

 

I have a series of 'cards' (divs w/ front and back) that look similar to this pen:

See the Pen yzahJ by GreenSock (@GreenSock) on CodePen

 

except the flips all happen on a timeline instead of on hover.

 

what we want is, in the middle of the timeline (which sequentially flips 8 cards), we want to be able to have a user hover, and stop that one card from flipping, and change its opacity.

 

right now, all 8 cards are run together on one single timeline (b/c we need tight control of timing), so i don't know if i need put them onto their own timelines or something.

 

Any pointers or clues would be much appreciated on how i could allow the single hovered card to drop out of the timeline and change its opacity, while still allowing the other cards to keep their animation/flipping happening.

 

Thanks!
m

 

Link to post
Share on other sites

Are you asking how to kill all the tweens of a particular card in a timeline (or anywhere) so that the user's interaction takes over instead of the pre-defined tweens? If so, all you need to do is call TweenLite.killTweensOf(yourElement) when the user interacts with it. 

 

Does that help? 

 

(sorry if I misunderstood your question)

Link to post
Share on other sites

Are you asking how to kill all the tweens of a particular card in a timeline (or anywhere) so that the user's interaction takes over instead of the pre-defined tweens? If so, all you need to do is call TweenLite.killTweensOf(yourElement) when the user interacts with it. 

Thanks for jumping in!

 

So if they hover while the card is rotating (in the middle of a tween), how would i kill that tween (or better yet, allow it to finish) and then handle the hover. Would that be on the onUpdate for that (rotate) tween?

 

Much appreciated,

m

Link to post
Share on other sites

To kill a tween (anytime, it doesn't matter if it's in-progress, hasn't started yet, or whatever), you can use TweenLite.killTweensOf(yourElement). 

 

If, however, you want to get any related tween that's in-progress and let it finish before you do some other thing, it's a little more involved. First, you've got to find the active tween and then change its onComplete (or just do a delayedCall() for however much time is left in the tween) to do your next activity. 

var activeTweens = TweenLite.getTweensOf(yourElement, true); //that second parameter is what tells it to only get the active tweens - make sure you've got the latest version of GSAP because that's a relatively new feature
if (activeTweens.length > 0) {
    activeTweens[0].eventCallback("onComplete", doYourOtherThing); //I assume you only have one possible tween, but to make your code more robust you could add a loop of the activeTweens, find the one that has the most time left, and change its eventCallback accordingly
} else {
    TweenLite.killTweensOf(yourElement); //prevent any tweens of yourElement that haven't started yet
    doYourOtherThing();
}

function doYourOtherThing() {
    //whatever you want...
}

Does that help?

  • Like 1
Link to post
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.

×