Equivalent of Jquery .stop()?

[LoveJs]

So im new to Tweenmax and i love it.  Very nice.

 

I have the following code right now:

$('.someDiv').hover(
  function(){
     TweenMax.to(this, .5, {width: '+=25px', height: '+=25px' });
  },
  function() {
     TweenMax.to(this, .5, {width: '-=25px', height: '-=25px' });
  });

And it works.  However, if you hover over and off of several elements the widths and heights get all messed up and Jquery's  animate.STOP() would fix that if I were using jquery to animate.  

 

Something equivalent to that for tweens?

 

*edit the jquery version:

$('.someDiv').hover(
  function() {
    $(this).stop().animate({ etc... });
  },
  function() {
    $(this).stop().animate({ etc... });
  });

[Carl]

Hi and welcome to the GreenSock forums.

 

Glad you are enjoying your time with GSAP. 

 

The equivalent to stop() is pause(), but what you are trying to do requires a few concepts to be sorted first.

 

First, you can't pause() a tween unless you have a reference to it like

var someTween = TweenLite.to(elem, 1, {});

//later
someTween.pause()

Since you are creating un-named tweens in anonymous functions, its kind of impossible to target them after they are created, which of course makes calling pause() on them difficult.
 

But the main issue that was causing problems is that you are creating a new relative tween each time the user hovers on and off. When you pass in a relative value to a tween like "+=20" that means 20 more than the current value, not the normal/original value.

 

For instance assume someDiv has a normal width of 100.  

on rollover you do this

 

TweenLite.to(".someDiv", 1, {width:"+=100"})

 

The first time that tween runs it will animate the width to 200. Cool.

 

Now imagine that while the tween is running you move your mouse off and then on again when the width is at 150.

 

Well a new tween will be created

 

TweenLite.to(".someDiv", 1, {width:"+=100"})

 

but now since the current width is 150, the end value will be 250!

 

See the dilemma? This is why your tweens at odd sizes. New tweens were being created mid-tween and the end values were relative to the current size.

 

 

----

 

There are a few ways around this. 

 

1: Don't use relative values when you know the user can create new tweens while tweens are running. Instead do the old fashion thing of using absolute values. If you want the end values to still be sort of dynamic and not hard-coded, you can use jQuery or JavaScript to determine the original size and the end size.

 

2: You can use relative values in your tweens and not have them break if you

- Create a tween for each element in advance

- Use the hover states to simply play() and reverse() each elements tween

 

The codpen demo below illustrates some of these concepts

 

http://codepen.io/GreenSock/pen/ICkBl

[LoveJs]

Actually it works just fine with Jquery Animate without the stop()....

$('.someDiv').hover(
  function(){
     $(this).animate({width: '+=25px', height: '+=25px' }, 200);
  },
  function() {
     $(this).animate({ width: '-=25px', height: '-=25px' }, 200);
  });

[LoveJs]

Alright, I understand what you are saying.  Thanks for the example I'll play around with it.

[Carl]

Cool. 

 

I don't really use jQuery animate at all, but testing your code:

 

http://codepen.io/GreenSock/pen/e797dea4f236be527f6650ecdea67481

 

It seems like if a roll over/off any div multiple times it creates a whole bunch of tweens that play in sequence.

[LoveJs]

Ok it works great, also works WAY faster in IE8! ( useing your example for better)

 

The Jquery version works well if you use a small time amount like 200ms

[Carl]

Great to hear the "real world" reports of better performance in IE. Thanks!

[LoveJs]

Im using that animate on 644 Divs on one page in IE8 when i was using Jquery to animate the Divs  the page would lag really bad.   Its very smooth with tween.  The difference is night and day... wow.

[GreenSock]

Just to echo Carl's earlier comment, jQuery's animate() method has an odd behavior [at least in my opinion] in that by default it just queues up animations one-after-the-other. So if call animate() on an element that's already animating, your new animation won't happen immediately - it waits until the previous animation(s) complete. That's why the relative values thing worked for you. Of course you can get the same effect with GSAP too if you want, using a TimelineLite, or better yet, just calculate the destination value in a closure which should give you even better performance:

$('.someDiv').each(function() {
	var $this = $(this),
	    width = $this.width(),
	    height = $this.height();
	$this.hover(
		function(){
			width += 25;
			height += 25;
			TweenLite.to($this, 0.2, {width:width, height:height});
		},
		function() {
			width -= 25;
			height -= 25;
			TweenLite.to($this, 0.2, {width:width, height:height});
		});
});