Jump to content
GreenSock

LoveJs

Equivalent of Jquery .stop()?

Recommended Posts

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... });
  });
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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);
  });
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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});
		});
});
  • 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.
×