Jump to content
Search Community

Stopping a Tween overwriting another

mikeebee test
Moderator Tag

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 all, 


I have a mouseover and a mouseout effect using TweenMax, It affects the y value. Works great. On a click event, I then use TimelineMax to animate various elements.


To look right, the start of the click animation relies on the mouseover tween being in it's most complete state, with the y value at it's peak.


So if you...

  1. hover
  2. leave your cursor in place
  3. and then click.

It looks perfect.


The issue I'm having is that if you...

  1. click
  2. quickly move your cursor away

the mouseout tween appears to overwrite the y value and the colour starts to drop out of position and doesn't fill the full box.


I've tried a few methods of stopping the mouseout tween cancelling the click tween but I'm stumped.


The items don't reset after being clicked (they'd usually change the page) but there are few to click on to test ;)


Basically, I need the mouseout animation to not run if you have clicked.


Any help will be appreciated.




See the Pen RPGGyM?editors=101 by anon (@anon) on CodePen

Link to comment
Share on other sites

Thinking about this, I bet there is a better way to do this using Timeline properly.


1. Mouseover - Assuming the stationary position is point A, play timelime to point B

2. Mouseout - reverse timeline from point B to point A

3. Click - play to point C regardless of point. So this could be anywhere between point A and B and it would just play smoothy to point C.


Does that make sense? Would someone be able to help me with that, if it's a good idea of course!



Link to comment
Share on other sites

Hi mikeebee  :)


pls try something like this :

var tl = new TimelineMax({paused:true});
 this.animation = tl;

$(".box").hover(over, out);
function over(){ this.animation.tweenTo("over") };
function out(){ this.animation.reverse() };

$(".box").click(function(){ this.animation.tweenFromTo("over", "click") });

pls check this out : 

See the Pen oXzZJo by MAW (@MAW) on CodePen

  • Like 1
Link to comment
Share on other sites

This works great! I have another question...


Is there a way to reverse all timelines except the one you're interacting with?


See this demo, you can see the code I tried at the bottom. The ideal outcome would be that you click one, then you click another and the one that was clicked and animated goes back to it's original state.


See the Pen oXzdqW by anon (@anon) on CodePen



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...